David J Rice

In response to David Lowry about the funky psychedelic effect that was happening while my pretty background images were busy loading which I shall henceforth refer to as the davidjrice effect (although I do wish it were somewhat similar to ”the lynx effect”), I investigated a little and thought I might be able to smooth things out by preloading the background images using CSS. You should hopefully be able to see, or rather not see the results already :)

So I have a background that is applied to the main body (the blue flower pattern), and one that is applied to the content area (the black flower pattern).

body {
  background-color:#000;
  background: url(/images/theme/background-header.gif) left top;  
  font: normal 12px "lucida grande", verdana, arial, helvetica, sans-serif;
}
...
#page{
  background-image: url(/images/theme/background-content.gif); 
}

Using CSS image preloading, we define the background image on an element that does not already have a background image before we want to apply it, including some positioning to ensure we don’t see it.

I also added a background color of black to the content area, which really improved things by fully masking out the blue flower pattern background.

html {
  background-image: url(/images/theme/background-content.gif);
  background-repeat: no-repeat;
  background-position: -1000px -1000px; 
}
body {
  background-color:#000;
  background: url(/images/theme/background-header.gif) left top;  
  font: normal 12px "lucida grande", verdana, arial, helvetica, sans-serif;
}
...
#page{
  background-color:#000;
  background-image: url(/images/theme/background-content.gif); 
}

And that’s about it! … and thus ends another exam revision stress induced procrastination episode. Not too much work for a smoother visual experience, now if only I can make typo (or perhaps lighty) to stop falling over and screaming HTTP 500s ever so often I can be happy with things on this site.