<img> or CSS background-image?

Discussion in 'HTML' started by JWL, Oct 2, 2006.

  1. JWL

    JWL Guest

    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!
    JWL, Oct 2, 2006
    #1
    1. Advertising

  2. JWL

    Ben C Guest

    On 2006-10-02, JWL <> wrote:
    > 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.
    Ben C, Oct 2, 2006
    #2
    1. Advertising

  3. 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
    background image _or_ <img> with alt=""; the choice between these depends on
    the circumstances but isn't generally a big issue.

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

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Oct 2, 2006
    #3
  4. JWL

    Andy Dingley Guest

    JWL wrote:

    > 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.
    Andy Dingley, Oct 2, 2006
    #4
  5. On Mon, 2 Oct 2006, JWL wrote:

    > #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?
    Alan J. Flavell, Oct 2, 2006
    #5
  6. JWL

    richard Guest

    "JWL" <> wrote in message
    news:...
    > 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.
    richard, Oct 3, 2006
    #6
  7. JWL

    Andy Dingley Guest

    richard wrote:

    > 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?
    Andy Dingley, Oct 3, 2006
    #7
    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. news.austin.rr.com

    how to download img from html img tag

    news.austin.rr.com, Apr 27, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    500
    Steve C. Orr [MVP, MCSD]
    Apr 27, 2005
  2. Noozer
    Replies:
    5
    Views:
    52,304
  3. Philipp Lenssen

    Problem: <img></img>

    Philipp Lenssen, Jun 27, 2005, in forum: XML
    Replies:
    15
    Views:
    740
    David Håsäther
    Jul 3, 2005
  4. Jopek
    Replies:
    7
    Views:
    385
    dorayme
    Apr 26, 2009
  5. Replies:
    7
    Views:
    167
    Tad McClellan
    Jun 22, 2006
Loading...

Share This Page