Webmasters Stack Exchange is a question and answer site for pro webmasters. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Screenshot for this question:

Background image not displaying correctly

I am using fixed position images as seen at css-tricks.com/examples/BlurryBackgroundEffect/ to create a glassy effect to a web project I'm working on. As you can see on the screenshot above often the content block image fails to display until the browser is forced to make a redraw by scrolling etc.

I've tried preloading them, using both onload and hidden img tags separately, but it still happens.

This is not a massive issue but if anyone understands why this occurs it would be really helpful.

share|improve this question
Could you post a link or some code? It's going to be near impossible to help given that we can't actually see where the problem is coming from. – bpeterson76 Sep 27 '10 at 19:51
sorry the site is local currently. Will once it goes live I guess. Dont worry about it and thanks for having a look. – Mikey Sep 28 '10 at 0:22

If you want to trigger a redraw you could always use:

body { display: none }


window.onload = function () {
    document.getElementsByTagName('body')[0].display = 'block';

this will make the page load seem much longer.

The best advice I've read on controlling the load/redraw across browsers has been Steve Souders Even Faster Web Sites.


Remember you can always put the relevant sections on a JSFiddle so that others can help (images can be uploaded to ImageShack and included by using the provided "Direct Link").

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.