3 Steps Simple Responsive Full Screen Images

By / Tips & Tutorials - HTML & CSS / November 18, 2020

INTRODUCTION
FLEXIBLE IMAGES

Welcome to a tutorial on how to create responsive full-screen images. So you need to show an image in its full glory? Be it in front of a gallery, or as a background image? Well, there are actually quite a few ways to do it, and this guide will walk you through the exact steps. Read on to find out!

ⓘ 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.

 

NAVIGATION
TABLE OF CONTENTS

Preamble
Source Code Download 		Step 1
The Basics 		Step 2
Background Images
Step 3
Scary Javascript 		Closing
What’s Next?

 

 

PREAMBLE
EXAMPLE CODE DOWNLOAD

First, here is the download link to the example code as promised.

 

SOURCE CODE DOWNLOAD

Click here to download the 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.

 

QUICK START

  • Download and unzip into a folder.
  • Hooray! There is no database involved, so just follow through each of the files contained within.

 

STEP 1
THE BASICS

Before we officially go into the full-sized image, here are the basics… Sort of an introduction for those of you who do not know how a “normal” responsive image works.

 

THE SCRIPT

1-basic.html
<!DOCTYPE html>
<html>
  <head>
    <title>
      Responsive Fullscreen Image Example
    </title>
    <style>
      /* [WHAT YOU NEED] */
      div.fullimg {
        /* Optional - fixed on screen */
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        /* Full sized */
        width: 100%;
        height: 100vh;
        /* Dark background */
        background: rgba(0, 0, 0, 0.7);
      }
      div.fullimg img {
        width: 100%;
        height: auto;
      }
      /* [DOES NOT MATTER] */
      html, body {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div class="fullimg">
      <img src="egg.jpg"/>
    </div>
  </body>
</html>

 

THE EXPLANATION

Yep, all we need to create a responsive image is to actually give it width: 100% and height: auto. The <div> container here is optional, but as an example of how you can create a fullscreen overlay – Just set it to a fixed position, give it full width, height, and a very large z-index number.

The browser will then automatically scale the image to fit onto the screen. But as from the screenshot above, we will run into a “not properly fitted” problem on the portrait orientation. This is why I will recommend using the background-image property for full-screen images, as it offers more controls.

 

 

STEP 2
BACKGROUND IMAGES

Following up with a “not so nice” fullscreen responsive image on the portrait orientation, here is a “fix” using background images.

 

FROM HTML TO CSS

2a-background.html
<!DOCTYPE html>
<html>
  <head>
    <title>
      Responsive Fullscreen Background Image Example
    </title>
    <style>
      /* [WHAT YOU NEED] */
      div.fullimg {
        /* Optional - fixed on screen */
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        /* Full sized */
        width: 100%;
        height: 100vh;
        /* Background image */
        background-image: url(egg.jpg);
      }

      /* [DOES NOT MATTER] */
      html, body {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div class="fullimg"></div>
  </body>
</html>

 

THE RESULT

In this version, we have simply removed the HTML <img> tag, and used the background-image property on the container instead. While it does fill up the entire screen now, it is still not so nice with repeating images, and we need to do a little more work on it.

 

 

CONTROLLING THE BACKGROUND IMAGE

2b-background.html
<!DOCTYPE html>
<html>
  <head>
    <title>
      Responsive Fullscreen Background Image Example
    </title>
    <style>
      /* [WHAT YOU NEED] */
      div.fullimg {
        /* Optional - fixed on screen */
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        /* Full sized */
        width: 100%;
        height: 100vh;
        /* Background image */
        background-image: url(egg.jpg);
        /* No reapeat, we fill the background instead */
        background-repeat: no-repeat;
        /* possible sizes - auto | contain | cover | % | px */
        background-size: cover; 
        /* possible positions */
        /* left top | left center | left bottom */
        /* right top | right center | right bottom */
        /* center top | center | center bottom */
        /* % | px */
        background-position: center; 
      }
      /* [DOES NOT MATTER] */
      html, body {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div class="fullimg"></div>
  </body>
</html>

 

THE EXPLANATION

That’s it. With just a few more lines of CSS, we can now fully control how the background will look like:

  • background-repeat is enabled by default, and it is good if you have a repeating pattern. If not, it is best to set this one to no-repeat.
  • background-size determines how the image will be processed to fit the space. cover will simply stretch the image to fit, but you can play around with the other settings to see which one works for you.
  • background-position determines where the image will be displayed on the container. I usually set this to center or left top. Again, play around and see which one works for you.

 

STEP 3
SCARY JAVASCRIPT

This final step is actually optional, and only for those of you who are looking to show the full-size image when the user clicks on a thumbnail… Be warned though, there are a few lines of Javascript involved.

 

THE HTML

3-lightbox.html
<!DOCTYPE html>
<html>
  <head>
    <title>
      Responsive Fullscreen Image - Lightbox
    </title>
    <link href="3-lightbox.css" rel="stylesheet">
    <script src="3-lightbox.js"></script>
  </head>
  <body>
    <!-- [LIGHTBOX CONTAINER] -->
    <div id="lightbox"></div>

    <!-- [THE THUMBNAILS] -->
    <div id="tgallery">
      <img src="egg.jpg"/>
      <img src="egg.jpg"/>
      <img src="egg.jpg"/>
    </div>
  </body>
</html>

 

THE CSS

3-lightbox.css
/* [THUMBNAILS] */
#tgallery img {
  width: 33%;
  height: auto;
  float: left;
}
#tgallery img:hover {
  cursor: pointer;
}

/* [LIGHTBOX] */
#lightbox {
  /* Optional - fixed on screen */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  /* Full sized */
  width: 100%;
  height: 100vh;
  /* Background image */
  background-repeat: no-repeat;
  background-size: cover; 
  background-position: center; 
  /* Hidden by default */
  visibility: hidden;
  opacity: 0;
  /* Animation magic */
  transition: all 0.3s;
}
#lightbox.show {
  visibility: visible;
  opacity: 1;
}

/* [DOES NOT MATTER] */
html, body {
  margin: 0;
  padding: 0;
}

 

THE JAVASCRIPT

3-lightbox.js
var lb = {
  wrap : null, // Holds the reference to the HTML lightbox div
  init : function () {
  // lb.init() : initialze on window load

    // Get HTML wrapper
    lb.wrap = document.getElementById("lightbox");
    // Click to close the lightbox div
    lb.wrap.addEventListener("click", lb.hide);
    // Attach onclick event to all image thumbnails
    var thumbs = document.querySelectorAll("#tgallery img");
    for (var t of thumbs) {
      t.addEventListener("click", lb.show);
    }
  },

  show : function () {
  // lb.show() : show the selected image

    // Attach selected image as background image on the lightbox, show it
    lb.wrap.style.backgroundImage = "url(" + this.getAttribute("src") + ")";
    lb.wrap.classList.add("show");
  },

  hide : function () {
  // lb.hide() : hide the full screen lightbox
    lb.wrap.classList.remove("show");
  }
};

/* [INIT] */
window.addEventListener("load", lb.init);

 

 

THE EXPLANATION

  • The HTML and CSS parts should be pretty straightforward. There are 2 sections to it – The thumbnails, and full-screen lightbox container.
  • We will use Javascript to change the background image of the full-screen <div id="lightbox"> container and to display it.
  • var lb contains all the key players of the full-screen image display.
  • When the window is fully loaded lb.init will fire up and attach onclick event listeners to all the thumbnails.
  • When the user clicks on a thumbnail, lb.show will read the src of the selected image, set it as the background on the full-screen container, and display it.
  • Finally, when the user clicks on the full-screen container, lb.hide will hide the container itself.

 

DEMO

 

CLOSING
WHAT’S NEXT?

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you in your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *