General Question

chromaBYTE's avatar

Can I make it so that the background image of my website doesn't appear until fully loaded?

Asked by chromaBYTE (652points) April 16th, 2009
5 responses
“Great Question” (2points)

I have a simple tiled pattern for the background of my website using a 150×150 image.

When I load the page in Safari, you see the background image as it loads, “streaking” down the page. While it doesn’t last long because it’s a small image, it looks incredibly tacky.

Is there any way to stop this from happening in my code?

I’m creating the background by putting this in my stylesheet:

body, html
background-image: url(../images/background.jpg);

Observing members: 0
Composing members: 0


forestGeek's avatar

You could easily delay it using Javascript.

jrpowell's avatar

Javascript would be best. This might help.

phoenyx's avatar

If you make the background color of the page the same color as the most common color in your image, it will be less jarring.

How big (kilobytes) is the image?

jrpowell's avatar

@phoenyx That is actually a fantastic idea. And it will help if the user doesn’t have javascript enabled.

lefteh's avatar

There is probably an easier way, but I remember at some point setting the CSS display attribute of the entire page to none, and then having a JS onload function show it. That is clunky. Don’t do that.

Never mind.

Answer this question




to answer.

Mobile | Desktop

Send Feedback