Images - content or layout?

M

Mr Squiddy

Have recently started coding a web page using XHTML and CSS I have come
across a dilemma regarding images. CSS has the capability to display
background images which can of course appear just like HTML images. Are
there hard and fast criteria as to whether an image is displayed using
CSS or HTML?

Thanks,
Mr S.
 
S

Spartanicus

Mr Squiddy said:
Have recently started coding a web page using XHTML and CSS I have come
across a dilemma regarding images. CSS has the capability to display
background images which can of course appear just like HTML images.

No they don't, consider non CSS capable clients, users with image
loading disabled, or using clients with no native image displaying
capability.
Are
there hard and fast criteria as to whether an image is displayed using
CSS or HTML?

Content: HTML
Decoration: CSS
 
N

Neredbojias

With neither quill nor qualm, Mr Squiddy quothed:
Have recently started coding a web page using XHTML and CSS I have come
across a dilemma regarding images. CSS has the capability to display
background images which can of course appear just like HTML images. Are
there hard and fast criteria as to whether an image is displayed using
CSS or HTML?

Thanks,
Mr S.

If you're using a strict doctype (which you should), any background
image must be installed in Css. Apparently it's consider gilding by
some.
 
D

dingbat

Mr said:
Are there hard and fast criteria as to whether an image is displayed using
CSS or HTML?

No, only vague rules.

"Content" should always go in the HTML. "Pure Decoration" wanders
towards the CSS route. Many things are intermediate though. "Layout"
can go in either. There are pros and cons both ways, and you have to
make a per-instance call. If you're repeating the same image on the
page a lot, then that's a suggestion it might work well through the CSS
method.

Hard rules:
CSS only has background images, not foreground (CSS 3 improves this).
So your CSS background image can't have z-index applied to it and it
doesn't co-operate well with a text alternative. OTOH It's very easy to
_overlay_ text over it, but then you could do that with z-index too.

Pure CSS :hover rollovers rely on the background image method.

You can easily tile the CSS backgrounds, which is useful for "elastic"
rules.

CSS stylesheets with huge numbers of image pulled in via an id selector
are generally an indication that you've gone too far. These can work,
but they're hard to manage as you have two "lists of data" that must
remain synchronised but are stored in separate places.

In general I'd suggest coding both and seeing which you prefer. Do this
a few times until you get a feel for how things work.

You can almost ignore non-CSS or non-image browsing. You can't ignore
it, but the issues apply equally well to both implementations.
Automatic "alt text" is better with <img>
 
G

Greg N.

So your CSS background image can't have z-index applied to it

I'm not sure what you mean by this. You can certainly z-index multiple
blocks, each with a different background, no?
 
D

dingbat

Greg said:
I'm not sure what you mean by this. You can certainly z-index multiple
blocks, each with a different background, no?

I'm not sure - I only fell into this particular hole recently. You can
certainly _apply_ z-index to different blocks, but the "background
image" is behind this ordering.
 
G

Greg N.

I'm not sure - I only fell into this particular hole recently. You can
certainly _apply_ z-index to different blocks, but the "background
image" is behind this ordering.

What do you mean by "is behind this ordering?"

Anyway, I'm using layered blocks with different background images, for
instance: http://hothaus.de/greg-tour/2004

The body and the div named foreground each have different bg images
which partly overlay each other. Works with IE, FF, and Opera.
 
D

dingbat

One other thing - CSS background images won't usually print. Most
browsers will avoid printing backgrounds unless the user knows how to
change a config setting and relatively few will do.

It's also an issue for white-text on coloured images. You may wish to
use some print-specific CSS to switch the foreground text to something
darker for printing.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top