SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Nov 2004
    Location
    Netherlands
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    background-image and browser behavior

    Ok in my css I have following:

    #banner1 {background-image: url('path to banner')}

    In my html:

    <td id="banner1" colspan="2" height="90">

    When I have this without the id, the page was loading well (in total). Because I could put the sizes of the image in width="380" and height="90". I know that Firefox can load partly when image sizes are not mentioned.

    How I can solve this issue by using the id for the background of my table cell?
    i.e. can I include that information (as well as the alt="") in the css coding?

    thanks for helping out

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Your post is a little confusing .

    Background images are not handled the same way as foreground images. A background image will not cause page layout errors because the space available is described by the element it is applied to and there is no need for the browser to allocate any space for the image because the element it belongs to already describes that. The background will just fill whatever space is a available with no problems. If you need a specific size for the background then just set that size for the element concerned.

    Foreground images on the other hand have their own intrinsic dimensions and unless you have the width and height attributes in the html then the browser won't know how much space to allocate until the image has actually loaded; which will either slow the page down or cause the layout to be misplaced as often happens in Firefox.

    You don't need to add the equivalent of the alt attribite to background images because background images are just for decoration only and are not to be confused with content. If the image is important to the content then it should be in the html anyway and not in the background.

    You may need to show an example of the problems you are having so that we can see what's going on

  3. #3
    SitePoint Evangelist
    Join Date
    Nov 2004
    Location
    Netherlands
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe my post was confusing, but yours is clear as can be :-)

    <td id="banner1" colspan="2" height="90" width="380">
    </td>

    I included the width now in the td and seems loading is normal.

    thanks for explaining

    Mathilde


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •