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.