Welcome to a tutorial on how to create a responsive full-screen background image with HTML and CSS. Need to add a background image that will look nice on both big and small screens?
A simple way to create a responsive full-screen background image is to set a background image that covers the entire window – body { width: 100vw; min-height: 100vh; background: url("IMAGE"); background-size: cover; }
.
That covers the quick basics, but read on for a few more examples!
ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
QUICK SLIDES
TABLE OF CONTENTS
DOWNLOAD & NOTES
Firstly, here is the download link to the example code as promised.
QUICK NOTES
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.
EXAMPLE CODE DOWNLOAD
Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
RESPONSIVE BACKGROUND IMAGE
All right, let us now get into the examples of how to create responsive background images.
EXAMPLE 1) SIMPLE RESPONSIVE BACKGROUND
<style>
body {
/* (A) REMOVE DEFAULT PAGE SPACING */
margin: 0; padding: 0;
/* (B) FILL ENTIRE WINDOW */
width: 100vw; min-height: 100vh;
/* (C) BACKGROUND IMAGE */
background-image: url("city.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
</style>
<main style="padding: 20px;">
<h1>CITY LIFE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</main>
Yes, that’s all it takes to create a responsive full-page background image. How this works:
margin: 0; padding: 0;
To remove any “annoying default page spacing”, make sure the page fills the entire window.width: 100vw; min-height: 100vh;
Make the page fill up the entire window by default.- This part should be pretty self-explanatory.
background-image: url("city.jpg")
The background image.background-size: cover
The background image will cover the entire page.background-position: center
Center the background image on the page.background-repeat: no-repeat
We do not want the background image to repeat itself but stretch to fill the page. Remove this if you are using a repeating pattern.
EXAMPLE 2) FIXED RESPONSIVE BACKGROUND
<style>
/* (A) BACKGROUND IMAGE */
#back {
/* (A1) FILL ENTIRE WINDOW */
width: 100vw; height: 100vh;
/* (A2) FIXED BEHIND */
z-index: 1;
position: fixed; top: 0; left: 0;
/* (A3) BACKGROUND IMAGE */
background-image: url("city.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* (B) FRONT CONTENT */
#front {
/* (B1) IN FRONT */
z-index: 2;
position: absolute;
/* (B2) DOES NOT MATTER - FOR DEMO */
line-height: 60em;
}
/* (C) SHARED */
#back, #front { box-sizing: border-box; }
</style>
<div id="back"></div>
<main id="front">
<p>CITY LIFE</p> <p>CITY LIFE</p> <p>CITY LIFE</p>
</main>
The above simple responsive background works, but it has a potential problem – If the page grows too long, the background image will stretch into bad proportions. To fix that problem, we can create a
<div id="back">
fixed background layer and overlay a <main id="front">
content layer over it.
- To deal with the background layer:
- (A1)
width: 100vw; height: 100vh;
The same old “fill up entire window” mechanism. - (A2)
z-index: 1; position: fixed; top: 0; left: 0;
Fix the background layer behind. - (A3)
background-image, background-size, background-position
Same old “make background image fill page”.
- (A1)
- To deal with the contents layer:
z-index: 2; position: absolute;
Place the contents layer in front of the background.
That’s all – The background image is now tied to the size of the window, not scale according to the length of contents.
USEFUL BITS & LINKS
That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.
LINKS & SUMMARY
Property | Description | Reference |
background-image |
Set background image. | Link |
background-size |
Set the size of the background image. | Link |
background-position |
Set the position of the background image. | Link |
background-repeat |
Repeat the background image. | Link |
- Perfect Full Page Background Image – CSS Tricks
- How to Create a Responsive Full Background Image Using CSS – WebFX
INFOGRAPHIC CHEAT SHEET

THE END
Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!
Excellent post, I love your website, full of programming tricks, thanks for existing!