CSS Help with Images

[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.

[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?

[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.

[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>

[Andrew_b]

That didnt seem to work, but thats ok. I can live with out it. Thank you for the help.

[Tural]

http://tural.gfxevolution.com/uploads/Andrew_b.rar

[Andrew_b]

Hey Thanks!