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?

Well, the image will only be loaded by the user's computer once, and is repeated as many times as necessary. The smaller the image, the better, since it will load faster.

Hope that helps. Cheers

If you are using an image to simply represent a solid colour, then use

Code: Select all

background: #ffffff; /*Replace with appropriate HEX*/

You might find this of use too.

It's got a good selection of Colour Hex Codes.

Thanks,
Ed

The only time I use an image for solid color is to compensate for shoddy PNG support among different browsers. It seems that the browser has to work harder to render a background with a single pixel height as opposed to multiple pixels in height. Need to experiment a little to find the best trade-off.

I generally don't keep image dimensions less than 10 pixels if it's repeating. Especially if it's something like 1px by 1px, the browser has to repeat it millions and millions of times. For the most part, it doesn't really matter, but that added 9 pixels might speed up the website for what little extra bandwidth it will initially take.

Are you referring to the inconsistent tone in browsers such as IE7, where the PNG appears slightly lighter / darker than it should?

You can fix this using TweakPNG and simply deleting the GAMA chunk of the file

I was aware of TweakPNG but never tried it. Might have to give it a go on the next project that needs the tweak. Thanks!

Back to the issue of browser generation. I resized a background image I'm using from 994x1 to 994x108. The filesize increased from around 300bytes to around 600bytes. Still very small. Since it only needs to be downloaded once and is then cached, I think this is better than having the browser redraw the entire area using a 1px height image each time somebody browses to a new page.

I'd like to see some benchmarks on this, and I'm sure there is variance between browsers. Not sure how to go about benchmarking though.