Supersized background image using CSS only

So everyone has seen Sam Dunn's amazingly versatile supersized jquery plugin here. It really was groundbreaking, and my hat truly goes off to the man for opening the doors for some seriously impactive website backgrounds.

But have you ever wondered how to achieve the supersized effect in CSS only?

I know that some of my sites can become a bit jQuery happy, and for those which involve a lot of dynamic database interaction anyway, the more achieved through CSS the better!

Check out this demo, or use the download link below to play with the code and files yourself!

View Demo →

Download →

Follow me on Twitter for the latest updates - or just to say hi!

CSS Styling

img.bkd { 


/* Cover Background */ 


min-height: 100%; 
min-width: 1024px; 




/* Scaling */ 


height: auto; 
width: 100%; 


/* Fixed Positioning */ 


position: fixed; 
top: 0; 
left: 0; 
z-index:-1; 
} 


/* Set max width to equal your image */ 


@media screen and (max-width: 1024px) 
{ 
/* Centre the image */
img.bkd { 


left: 50%; 
margin-left: -512px; /* Half your original image width */ 


} }

HTML

<img src="images/supersize-bkd.jpg" class="bkd" />