Images - content or layout?

Discussion in 'HTML' started by Mr Squiddy, Aug 21, 2005.

  1. Mr Squiddy

    Mr Squiddy Guest

    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.
    Mr Squiddy, Aug 21, 2005
    #1
    1. Advertising

  2. Mr Squiddy

    Spartanicus Guest

    Mr Squiddy <> wrote:

    >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

    --
    Spartanicus
    Spartanicus, Aug 21, 2005
    #2
    1. Advertising

  3. Mr Squiddy

    rf Guest

    Mr Squiddy wrote:

    > CSS


    Eye candy

    > or HTML?


    Content

    Cheers
    Richard.
    rf, Aug 21, 2005
    #3
  4. Mr Squiddy

    Neredbojias Guest

    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.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    Neredbojias, Aug 22, 2005
    #4
  5. Mr Squiddy

    Guest

    Mr Squiddy wrote:
    > 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>
    , Aug 22, 2005
    #5
  6. Mr Squiddy

    Greg N. Guest

    wrote:

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

    --
    Gregor's Motorradreisen:
    http://hothaus.de/greg-tour/
    Greg N., Aug 22, 2005
    #6
  7. Mr Squiddy

    Guest

    Greg N. wrote:
    > wrote:
    >
    > > 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?


    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.
    , Aug 22, 2005
    #7
  8. Mr Squiddy

    Greg N. Guest

    wrote:

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


    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.

    --
    Gregor's Motorradreisen:
    http://hothaus.de/greg-tour/
    Greg N., Aug 22, 2005
    #8
  9. Mr Squiddy

    Guest

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


    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.
    , Aug 22, 2005
    #9
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Rick Spiewak
    Replies:
    3
    Views:
    3,150
    Rick Spiewak
    Aug 26, 2003
  2. RobertH
    Replies:
    1
    Views:
    719
    Steve C. Orr [MVP, MCSD]
    Nov 4, 2003
  3. hazz
    Replies:
    6
    Views:
    49,548
    SkyUCHC
    Jun 9, 2010
  4. Replies:
    1
    Views:
    572
    John Timney \(MVP\)
    Jun 19, 2006
  5. Lo?c Mah?
    Replies:
    2
    Views:
    1,687
    Lo?c Mah?
    Nov 29, 2004
Loading...

Share This Page