CSS Make Background Image Full Screen
Tags: html, css, programming
Published: 2021-09-20 12:29:58

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

- [Create A Div Element](https://softauthor.com/css-make-background-image-full-screen/#create-a-div-container-element)
- [Make A Div Full Screen](https://softauthor.com/css-make-background-image-full-screen/#make-the-container-div-fullscreen)
- [Add Background Image](https://softauthor.com/css-make-background-image-full-screen/#add-background-image-full-screen)
- [Adjust Background Image Size](https://softauthor.com/css-make-background-image-full-screen/#adjust-background-image-size)
- [Position Background Image](https://softauthor.com/css-make-background-image-full-screen/#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.

```CSS
<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](https://softauthor.com/css-make-a-div-height-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%**.

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

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

```CSS
.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.

![Alt text of image](https://softauthor.com/wp-content/uploads/2021/08/CSS-Background-Image-Full-Screent-Scroll-bar-visible-1536x1349.png)

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.

```CSS
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.

![Alt text of image](https://softauthor.com/wp-content/uploads/2021/08/CSS-Background-Image-Full-Screent-border-right-bottom-hidden.png)

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

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

![Alt text of image](https://softauthor.com/wp-content/uploads/2021/08/CSS-Background-Image-Full-Screen-With-Border-Around-1536x1351.png)

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*](https://softauthor.com/registration-form-design-in-html-css-with-code/)

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

[Continue Reading...](https://softauthor.com/css-make-background-image-full-screen/#position-background-image)