1 person found this helpful
The real issue is that huge background images take up excess bandwidth and take forever to load on slow connections. And they won't appear at all on some mobile devices. A high price to pay for eye candy. Why must your background image be so huge???
Best to use small seamless images and repeat horizontally and vertically. Or use a scaled down background image and center it on your screen.
More on Backgrounds.
Thanks for the input and assumptions. Mobile is not a concern because of my target audience and 'eye candy' is a concern due to the nature of the site.
The 'real issue' is that I have been told background images load last even though it may be first in code. The nature of HTML is that the background image won't start to load until the last line is read.
What I am specifically asking: is there a way to make or force the background image to load first? (just one question mark works and saves space)
IF there is a workaround to not load a background image and still have a background image another way, my inital image is 1000x500. I can then repeat a strip off the bottom of 1000x10 or something.
Anyone know any workarounds?
IF there is a workaround to not load a background image and still have a background image...
Use a compatible solid background-color in your body or division. When the background-image finally gets around to loading (varies by browsers), your solid color will be replaced by the image.
background: #EAEAEA url(your-BG.jpg) repeat;
In addition, you might benefit from using an image sprite. One image file instead of many has the advantage of loading faster because there are fewer HTTP server-requests.
Best of luck,