SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member undoIT's Avatar
    Join Date
    Jan 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Optimizing Repeating CSS Background Images

    I've searched for an answer to this question and haven't come up with anything yet. Using background repeat in CSS I am able to make a seemingly solid area with an image that is only a few pixels in width or height. For example, as a background to the content area in the new layout for Themebot, I set background: repeat-y, and the dimensions for the image are 994px by 1px.

    I am assuming that cropping the background image down to 1px in height will use the least bandwidth to load since the image is as small as possible. However, I'm wondering how the image is repeated. This must be done on the visitors computer and I'm wondering if this would create any issues with users who have slow computers. Are there any advantages to having the height be 10px or larger as opposed to just 1px? Will the page seeming load faster if a larger image is being repeated?

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The browser will have 10 times less work to do rendering the background if the image is 10px high as opposed to 1px, and the extra height usually doesn't increase file size by much. I usually go for around 10px for repeating graphics.

  3. #3
    SitePoint Member undoIT's Avatar
    Join Date
    Jan 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome. That's the info I was looking for. Had a hunch this is the case. I'm sure there is a sweet spot, file size vs. pixel height. Time for a little experimentation.


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
  •