I am currently using a GIF as a background image, but I would like it to show a static image until the GIF is fully loaded and ready to play.
After reading several similar discussions, I understand that you can manipulate elements with JavaScript once they have finished loading. However, all the examples I've come across focus on img tags rather than a background image set via CSS.
Here's a code snippet for reference:
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
width: 100%;
height: 100%;
background: #232228 url(../img/bg-center.jpg) top no-repeat; /* Static */
background: #232228 url(../img/bg-center.gif) top no-repeat; /* Animated */
}