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

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

5 Answers

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

Login

or

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther