Implementing background image for A HREF in CSS

Question

I have an href in HTML that I dynamically produce from a server. I have designed a nice rounded corner gif image that I would like to use as the background i.e. put the text (in white) over the gif image and have it still linkable.

The current html looks like:

<h2>
  <!--img src="images/greenback.gif"-->
  <a id="site-title0" class="titletext" href="#">
    Alligator Creek, Bowling Green Bay National Park
  </a>
</h2>
<div id="descrip0" class='description'>
  20km S of Townsville. $4.85/night. Gates close...

What is the best way to do this with CSS? It seems I could either use relative positioning to move the text over the background image, but in early experiments, this affects the rest of the flow on the page.

Or, maybe using CSS background-image is the best way?

Answer 1

You have to set the link to display: block

Answer 2

As Daniel says, really:

a.particular-link {display: block; /* or inline-block; I think IE would respect it since a link is an inline-element */
                   background: #fff url(path/to/image.gif) top left no-repeat; 
                   text-align: center;
                   line-height: 50px; } /* line height should be equal to the height of the image to vertically center using this technique */

I'd also -and this may simply be personal habit, affectation and received 'wisdom'- suggest using .png rather than .gif. But, as noted, it's likely a personal and subjective thing.

Answer edited in response to timbo's comment.

Also, and this ain't particularly pretty, there's a code demo here: http://davidrhysthomas.co.uk/so/a-img-bg.html

Answer 3

Display: block; is the best answer. Try using text-align:center to center the text.

webdevelopertut

Answer 4

display: block on the a or attach the background image to the h2. Either way, be sure to set a background color on the a or the h2 if you're using white text. If some one has CSS on and images off, they wont see your link. Means you may need to fill in the corners of your rounded corner image to the bg color of the page.