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?

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

 

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

1-backgroumd.html
<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

2-fixed.html
<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.

 

 

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

 

INFOGRAPHIC CHEAT SHEET

Fullscreen Responsive Background Image (Click To Enlarge)

 

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!

1 thought on “Responsive Full-Screen Background Image (Simple Examples)”

Leave a Comment

Your email address will not be published.