Giving a text link a background image?

everyone. I'm trying to give a text link a background image but I'm not having any luck, I've got no image appearing. I was wondering if someone one could tell me if my code is wrong and what I can do to correct it. Thanks for any help in advance.

Here's my css code, hlink and home are ids, and home is my positioning of my link text

#hlink:link{
        background-image: url("../media/taboff.gif");
        color:#000000;
        text-decoration:none;
}

#hlink:visited{
        color:#000000;
        text-decoration:none;
}

#hlink:hover{
        /*background-image:url("../media/tab2.gif");*/
        text-decoration:underline;
        color:#EF504开发者_StackOverflow中文版B;
}

#hlink:active{
        text-decoration:underline;
        color:#EF504B;
}

#home{
        position:absolute;
        font-size:2em;
        top:270px;
        left:300px;
        text-align:center;

and here is my html code

<div id="home">
        <a id="hlink" href="midterm.html">Home</a>
</div>

Edit: I just want to say thank you all so much for helping me, every single one of you have saved my life, I don't know if edits notify everyone who has answered, but again, thanks so much. Aside from some missing code, my biggest problem was with the image itself that I was using so that's my next issue to correct. I tested out a different image and it worked 100% so thanks for that everyone. I'm also relatively new to this, I'm a freshman in college and have only been doing this for a few weeks(I also have a terrible professor but that's another story for another time) but I'm glad to have found such a helpful community, hopefully one day I'll be able to contribute myself.

Works for me: http://jsfiddle.net/GTHyU/

My guess is that perhaps you have made your url() relative to your HTML page instead of your CSS file? Try it with an absolute URL first and see if it starts working, then figure out the appropriate relative path you need based on the location of the CSS file.

Try it like this

#hlink{
        background:transparent url(../media/taboff.gif) repeat-x 0 0;
        color:#000000;
        text-decoration:none;
}

Check working example at http://jsfiddle.net/nh7nY/

Add these styles to each link:

display: block;
width:100px;
height:100px;

That should make the background-image appear. You can change the height and width to fit your requirements.

Try this:

#hlink:link {background:url(images/media_library.png) no-repeat top left}