CSS Make Background Image Full Screen

#html #css #programming

Learn how to set an image of any size as the background of an HTML element full screen in CSS!

Create A Container Div Element

Create a div or any block-level HTML element with the class name called .bg-container where I’m going to add a background image into.

<div class="bg-container">
</div>

Make The Container Div Full Screen

Then, make the div full screen so that the background image fits the full screen of the browser window.

Note: You can change the size of the container div if you do not want the image to fill the whole screen because the background image will only be visible based on the size of the container div.

There are a few ways to make a div full screen but I’m going to use the height:100% CSS property to achieve it this time.

This is a two-step process.

Step 1. Add a couple of CSS properties to the html and body selectors. Setting the margin to 0 will get rid of any white space around the browser window and set the height to 100%.

html, body {
  margin:0;
  height:100%;
}

Step 2. Add three properties to the .bg-container selector.

.bg-container {
  width:100%;
  height:100%;
  border:5px solid red;
}

I’ve explicitly set the width to 100%, but we do not have to because div is a block-level element and its default width is stretched to its parent width, in this case, body.

Then, set height:100% which will stretch the height of the .bg-container to the bottom edge of the browser viewport. In order to get the height to work, make sure you’ve added the height:100% to the html and body selector above, otherwise, it won’t work.

To see that .bg-container, add the border with 5px width, solid style, and red color.

At this stage, I have an issue that the scroll bars appear on the right and bottom which hide the red border.

Let’s fix that.

To hide the scroll bar, add overflow: hidden to the html and body CSS selectors.

html, body {
  margin:0;
  height:100%;
  overflow:hidden;
}

As you can see from the below picture, the scroll bar is gone but the border at the bottom and right are still hidden.

This is because when you give a border to the element that is already 100% width, the border will be added to the container in addition to the 100% width on both left and right sides. That’s why the border on the right and bottom stretched beyond the edge of the browser viewport.

To bring the border back in, in other words, include the border within the 100% width, all I have to add is the box-sizing:border-box CSS property to the .bg-container.

.bg-container {
  width:100%;
  height:100%; 
  border:5px solid red;
  box-sizing:border-box;
}

This way, I know if I add an image as a background image to this container it will be visible to the full screen.

Recommended
Design Cool Registration Form Using HTML & CSS

Add Background Image Full Screen

Let’s add the background image to the .bg-container.

For that, all I have to do is add the background-image CSS property to the .bg-container with the image URL path which will normally be the image location of your project folder or any web image URL.