Back to Blog

Full-Width Backgrounds Using CSS Cover

Published on 19 March 2014

More and more, I see websites with large image backgrounds that completely fill the screen size.

I really like these and here’s how to achieve it simply using CSS:

.section {
background: url(images/bigbackground.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bigbackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bigbackground.jpg', sizingMethod='scale')";
}

That’s it! Obviously you need to change the Div name and background image/path to suit but you’re good to go.

Let's Work Together

Got a project like this in mind?

I build bespoke AI agents, RAG systems, and high-performance WordPress & Next.js sites. Let's talk about what's possible.