Responsive Full-Screen Background Image (Simple Examples)

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?

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	Background Image	Useful Bits & Links
The End

 

 

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.

 

 

 

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:

1. margin: 0; padding: 0; To remove any “annoying default page spacing”, make sure the page fills the entire window.
2. width: 100vw; min-height: 100vh; Make the page fill up the entire window by default.
3. 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.

1. 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”.
2. 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.

 

 

 

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