CSS Make Background Image Full Screen

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

• Create A Div Element
• Make A Div Full Screen
• Add Background Image
• Adjust Background Image Size
• Position Background Image

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.

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…