Background image: How to?

[kgun]

I use CSS and images for my styling, but don't use the

background-image:url('backgroundimage.gif');

CSS styling rule.

Take the last link in my example. Looking at the code you will find markup like this

<img alt="" src="http://www.oopschool.com/styling/gblnav_left.gif" height="32" width="4" id="gnl">

My simple question:

Is there any reason that I should change to the first format and link to images in the CSS stylesheet?

[ran_dizolph]

Well, the format you use isn't really a 'background' image per se, it's directly in the code. Furthermore what you've displayed is deprecated (height and width inline).

The idea with background images as to my understanding, is to use them more for layout, as opposed to actual content. That's the way I separate the two. If an image has to do with the content on the site, use the img tag, if not, use a background image.

[weslinda]

Guess it depends on if the image is unique for various pages vs the style sheet. If the image is the same sitewide, it makes it easier to change that image if you're working in css, as you can use a new image, change the placement of the image, remove the image, so forth and so on.

My 2 Cents on that one.

[ronchalice]

Is it not also true that a CSS background image is only loaded (and painted) once if the CSS is the same from page to page but the img tag is loaded each time it occurs?

Thanks,

[Doc]

Is it not also true that a CSS background image is only loaded (and painted) once if the CSS is the same from page to page but the img tag is loaded each time it occurs?

Thanks,

Very good point, Ron!

[keddy1]

ron you have put up an important point.why there is no comment on this.

[past2future]

if you are planing to link that image then use it in the html code.. but if the image is just a background image and you would like to change the image in future to something else then its better to put it in css file just to keep everything organized as well

[Uncle Dog]

Also, if a visitor decides to print your page, background-image(s) don't ordinarily show up and waste ink or obfuscate text. Normally I put a logo in an img tag so that it is always printed.

[weegillis]

Sorry, kgun, for butting in...

Furthermore what you've displayed is deprecated (height and width inline).

Link: HTML img tag

Note that width and height are indeed, still optional attributes of the IMG tag. Including them helps browsers reserve space in the layout and move on to other code without having to wait for the download.

[kte.moss]

No there is no such compulsion. If you are getting the desired results with this code, then do not change it, just because someone has said you to change.