#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    60
    Rep Power
    3

    Can I not use CSS sprite for a background image??


    Hi there.

    I'm trying to use CSS sprite for the first time to lighten the page load and have this question.

    I know I was supposed to use CSS sprite for images like small icons, navigation's button image, link buttons and other "small" images that you may see on a website.
    But can I not use CSS sprite technique for one big 1280*1024 type of background(or wallpaper) image because I was thinking that is the biggest image that should delay loading process the most?
    I would like to get this guys included in the sprite map so that browsers don't have to send request for the biggest image on the whole entire site.

    Thank you
  2. #2
  3. No Profile Picture
    Lost in code
    Devshed Supreme Being (6500+ posts)

    Join Date
    Dec 2004
    Posts
    8,316
    Rep Power
    7170
    I believe the answer is no unless there are some newer CSS techniques for handling images that I'm not aware of. If the container for the image is larger than the image, then you can't put it into a sprite. Since this is true of the <body>, you can't. If you put the background image into something like a <div> instead, then you could potentially put it into a sprite as long as it doesn't repeat.

    Using a sprite doesn't speed up the load time of big images; the image data takes the same amount of time to transfer regardless. What a sprite does is reduce the number of HTTP requests. This is most effective at reducing the load time for small images, because the HTTP request for a small image represents a substantial part of the time required to retrieve the image, whereas for a large image the HTTP request does not represent a substantial part of the time required to retrieve the image.
    PHP FAQ

    Originally Posted by Spad
    Ah USB, the only rectangular connector where you have to make 3 attempts before you get it the right way around
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    60
    Rep Power
    3
    Oh okay and thanks for the detailed explanation.
    that makes sense and I appreciate your time.

    I hope the wall paper image doesn't delay loading time after getting small images on CSS sprite.

    Thanks again.


    Originally Posted by E-Oreo
    I believe the answer is no unless there are some newer CSS techniques for handling images that I'm not aware of. If the container for the image is larger than the image, then you can't put it into a sprite. Since this is true of the <body>, you can't. If you put the background image into something like a <div> instead, then you could potentially put it into a sprite as long as it doesn't repeat.

    Using a sprite doesn't speed up the load time of big images; the image data takes the same amount of time to transfer regardless. What a sprite does is reduce the number of HTTP requests. This is most effective at reducing the load time for small images, because the HTTP request for a small image represents a substantial part of the time required to retrieve the image, whereas for a large image the HTTP request does not represent a substantial part of the time required to retrieve the image.

IMN logo majestic logo threadwatch logo seochat tools logo