Inserting background images like Bing using CSS

Question

Hello,

I want to put images of the 1024x768 as backgrounds and load quickly using css. I could use

background(url....) 

in the CSS, but will that solve the issue, of downloading images quickl?

Thanks Jean

Answer 1

remember you can't change the user dsl speed. so css background would be good. Maybe start with take a higher JPEG compression to minimize the file

(btw. i hate (full size) background images at websites with my dsl light)

Answer 2

If you have to use this technique, then remember to compress and cache the image, this will speed it up somewhat, but try and be creative with alternative solutions.

For example can the background repeat on the x-axis? If it can you'll be able to create a 1px wide version that you can repeat across the page.

Answer 3

Try searching for this. It helps cutting off a few KB of data. PNG Gauntlet is also a free software for PNG compression that also cuts Gama correction that causes problems with IE6 and IE7.
Body background images are usually saved with lower quality, thus reducing size. If your backgrounds are changeable, preload them. It is done by putting divs of zero height at the beginning of the page, and assigning background-image style to each. The images are loaded at the beginning, so when the background of the body gets changed the user doesn't notice the lag.
Google started to count the load time already, so classic preloading causes problems with SEO. Loading with JS, after the page fully loads is an option, or even assigning styles with JS after certain actions are made is also a solution.