Button graphic on photoshop, How do I apply it to my HTML?

Hello everyone,

I'm still trying to figure out what the best way is of applying something you designed on photoshop like a button in my case to your website.

I am trying to modify the background of my current button by pointing to my the photoshop graphic but it does not change.

This is my current code:

Button: <a href="index.html" class="button"> Home</a>
Button Class:
button {
background-color:#000000;
border-right: 1px solid #FFFFFF;
color:#FFCC00;
font-size:0.8em;
font-weight:bold;
line-height:2;
padding:5px 20px;
text-decoration:none;
}

Currently my buttons are still without the background attribute as the code above reveals. Can someone please shed some light.

Thank you,

Button: <a href="index.html" class="button"> Home</a>
Button Class:
button {
background-color:#000000;
border-right: 1px solid #FFFFFF;
color:#FFCC00;
font-size:0.8em;
font-weight:bold;
line-height:2;
padding:5px 20px;
text-decoration:none;
}
The class selector for button is .button

The class selector for button is .button

Yes I do have a point in my code. It's just I missed it while copying the code over here.
Thanks

I get small a rectangular box having a black background by that code.

Hello lallous,
What is the path to your button graphic? I don't see that you're loading it at all.
.button {
background:#000 url(path/to/your.img);
border-right: 1px solid #FFFFFF;
color:#FFCC00;
font-size:0.8em;
font-weight:bold;
line-height:2;
padding:5px 20px;
text-decoration:none;
}

i think you're asking for the code to use an image instead of a colour..



.button {
border-right: 1px solid #FFFFFF;

background:url(path/to/my/image.jpg no-repeat; /* */

/* i'd set height+width personally unless it repeats */

color:#FFCC00;
font-size:0.8em;
font-weight:bold;
line-height:2;
padding:5px 20px;
text-decoration:none;
}

I managed to solve it.
Thank you for your input everyone.