PDA

View Full Version : Background image via CSS on <caption>



BillAlpha
Mar 22nd, 2007, 05:24 PM
Hi folks - I wonder if you can help with my <caption> problem?

I have the following table HTML:

<table id="cast" cellspacing="0" summary="Names and characters of the additional cast in City Lights">
<caption>Additional cast for City Lights</caption>
<thead>
<tr>
<th scope="col">Actor</th>
<th scope="col">Character</th>
</tr>
</thead>

And the following CSS:

caption {
width: 500px;
height: 100px;
padding: 0;
margin: auto;
font: italic 14px;
text-align: right;
background: transparent url('../img/header3.png') no-repeat;
}

The caption text is pushed upwards by the height of the background image so that it is level with the top edge of the image. Is there anyway to get the caption text back down to its original location, which would be the bottom edge of the image/ top edge of the table head?

Or maybe I'm making this complicated and there is an easier way to add a backround image to the caption tag via CSS without affecting the actual text?!

Any help appreciated :)