Page 1 of 1
CSS Help with Images
Posted: Mon Jun 09, 2008 1:16 pm
by Andrew_b
Im trying to call images through CSS onto my page, so if i ever want to change the images, i can do it through CSS. I have a problem however. I do not know the CSS codes for images.
Heres my html:
Code: Select all
<div align="center" valign="top" id="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td width="2%""><div align="right"><img id="left"></div></td>
<td width="96%" id="middle"><div align="center"><img id="middle"></div></td>
<td width="2%"><div align="left"><img id="right"></div></td>
</tr>
</tbody></table>
</div>
Heres my CSS:
Code: Select all
img#left {
image-source: url("./images/header_left.png");
}
td#middle {
background-image: url(./images/header_main.png);
}
img#middle {
background-image: url(./images/header_text.png);
}
img#right {
image-source: url(./images/header_right.png);
}
Please Help. Ive looked for tuts online but nothing helpful came up for CSS and image commands.
Posted: Mon Jun 09, 2008 3:58 pm
by Tural
As far as I know, it's not possible to set the source of an image tag through CSS. I've never seen it done, and as you said, there is virtually no documentations suggesting it can be. I do however see one instance, in a quick look, specifically saying it can't be done. It would be much more practical, if you're filling the td with the image, to just make the td background image be that image. However, since I can't see what you're going for, I can't suggest that for certain. Possible for you to post an example of what you want it to look like?
Posted: Mon Jun 09, 2008 4:11 pm
by Andrew_b
i see some CSS errors on my part. As of now, my server isnt cooperating. When i get it to work properly i will post back to show you what i mean. Thank you Tural.
Edit:
I hope that helps.
Posted: Mon Jun 09, 2008 4:43 pm
by Tural
Code: Select all
/* CSS */
<!--
td.left {
background-image: url(images/header_left.png);
}
td.middle {
background-image: url(images/header_main.png);
}
td.right {
background-image: url(images/header_right.png);
}
-->
And then you'd just use the text image normally as an image.
Code: Select all
<div align="center" valign="top" id="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td width="2%" class="left"></td>
<td width="96%"class="middle"><img src="images/header_text.png" align="center"></td>
<td width="2%" class="right"></td>
</tr>
</tbody></table>
</div>
Posted: Mon Jun 09, 2008 5:05 pm
by Andrew_b
That didnt seem to work, but thats ok. I can live with out it. Thank you for the help.
Posted: Mon Jun 09, 2008 5:20 pm
by Tural
Posted: Mon Jun 09, 2008 5:28 pm
by Andrew_b
Hey Thanks!