<img> or CSS background-image?

[JWL]

Hi

Suppose I have a site that requires a horizontal line of four images on
each page. This is a design thing and doesn't really have much bearing
on the site's content. The images differ from page to page.

Anyway, using a CSS layout, I left-floated the four divs and placed
<img> tags in them to display the images. But now I'm thinking: would it
be better to place background images in the divs using CSS? By using
contextual selectors I could place exactly the same HTML on each page
and have the CSS select the different images, which would make things
much cleaner. Is there any reason not to do this? I'm not sure whether
to choose one or the other.

Related to that, suppose I do have a div that exists only to display a
background image:

#header {
width: 800px;
height: 100px;
background: url('banner.gif') no-repeat;
}

Is it OK to have an empty div in the HTML:

<div id="header"></div>

Or should I put a space in:

<div id="header"> </div>

Looking at people's source, I've seen both techniques, but I don't know
if it makes the blindest bit of difference to all the browsers I'm
unable to test in.

Thanks for looking!

 

[Ben C]

Hi

Suppose I have a site that requires a horizontal line of four images on
each page. This is a design thing and doesn't really have much bearing
on the site's content. The images differ from page to page.

Anyway, using a CSS layout, I left-floated the four divs and placed
<img> tags in them to display the images. But now I'm thinking: would it
be better to place background images in the divs using CSS? By using
contextual selectors I could place exactly the same HTML on each page
and have the CSS select the different images, which would make things
much cleaner. Is there any reason not to do this?

Not that I know of.

I'm not sure whether to choose one or the other.

If using CSS makes what you're doing cleaner, use that.

Related to that, suppose I do have a div that exists only to display a
background image:

#header {
width: 800px;
height: 100px;
background: url('banner.gif') no-repeat;
}

Is it OK to have an empty div in the HTML:

<div id="header"></div>
Yes.

Or should I put a space in:

<div id="header"> </div>

It makes no difference if the div is whitespace: collapse (which is the
default).

Looking at people's source, I've seen both techniques, but I don't
know if it makes the blindest bit of difference to all the browsers
I'm unable to test in.

Shouldn't do.

 

[Jukka K. Korpela]

Scripsit JWL:

Suppose I have a site that requires a horizontal line of four images
on each page.

Suppose that you gave us the URL. Then we would know what this is really
about and could give a simple, direct answer.

This is a design thing and doesn't really have much
bearing on the site's content. The images differ from page to page.

But the site _requires_ the images? So it's presumably unusable by anyone
who uses a text browser, speech browser, Braille device, or otherwise
imageless browsing. Right? I guess not.

The key question is: is it genuine content, or just decoration? Or something
between? Exactly where there?

If content, use <img> with adequate alt attributes. If decoration, use

width: 800px;

Too much width. Broken by design. Remarkably many web sites force horizontal
scrolling just because some dee-ziner decided on wide banner image.

 

[Andy Dingley]

Anyway, using a CSS layout, I left-floated the four divs and placed
<img> tags in them to display the images. But now I'm thinking: would it
be better to place background images in the divs using CSS?

The fact that you can place background images through CSS is no
indication that you ought to. The notion that you can apply CSS
rollovers to them isn't a good recommendation either.

CSS only supports "background" images, not foreground. The useful
behaviours that emerge from this (such as rollovers) don't change the
fact that it's primarily a background feature. It's definitely a
mistake to start treating this as a primary way of distributing real
content. Stick with <img>.

For one simple example, general default behaviour on printing is to not
print CSS background images. This is such a useful feature (because of
excess eye candy) that it's impractical to change this setting. So if
you want your images to be printable, then don't stick them through CSS
backgrounds.

 

[Alan J. Flavell]

#header {
width: 800px;

You'll be fighting my user stylesheet which, at least for my regular
browsing, says max-width: 55em;

In CSS the user has the last word. Are you sure that the rest of your
design can live with that?

 

[richard]

Hi

Suppose I have a site that requires a horizontal line of four images on
each page. This is a design thing and doesn't really have much bearing on
the site's content. The images differ from page to page.

Anyway, using a CSS layout, I left-floated the four divs and placed <img>
tags in them to display the images. But now I'm thinking: would it be
better to place background images in the divs using CSS? By using
contextual selectors I could place exactly the same HTML on each page and
have the CSS select the different images, which would make things much
cleaner. Is there any reason not to do this? I'm not sure whether to
choose one or the other.

Related to that, suppose I do have a div that exists only to display a
background image:

#header {
width: 800px;
height: 100px;
background: url('banner.gif') no-repeat;
}

Is it OK to have an empty div in the HTML:

<div id="header"></div>

Or should I put a space in:

<div id="header"> </div>

Looking at people's source, I've seen both techniques, but I don't know if
it makes the blindest bit of difference to all the browsers I'm unable to
test in.

Thanks for looking!

I kind of like the CSS version on account of the validator is happier that
way.
If you use <img> then you've got to add in all kinds of stuff just to
validate.
CSS is quicker and cleaner.

 

[Andy Dingley]

I kind of like the CSS version on account of the validator is happier that
way. If you use <img> then you've got to add in all kinds of stuff just to
validate.

What complete and utter rubbish.

You _are_ Richard Bullis, aren't you?