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
- Center Background Image
Create A Container Div Element
Create a div or any block-level HTML element with the class name called .bg-container where we are 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.
- 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%;
}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.
.bg-container {
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg");
width:100%;
height:100%;
border:5px solid red;
box-sizing:border-box;
}The value of the background-image property must be the word URL followed by the image URL path in single or double quotes inside the parenthesis.
Recommended
CSS Center A Div Horizontally & Vertically
Adjust Background Image Size
Wait…we’re not done yet!
As you can see the image is cut off because the image size is bigger than the width of the .bg-container. I can fix it using the background-size property. It has the main two values Cover and Contain.
Cover will try to fit the height of the image to the screen height and stretch the width proportionately.
.bg-container {
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg");
background-size:cover;
...
}
Contain will try to fit the width of the image to the screen width and stretch the height proportionately.
.bg-container {
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg");
background-size:contain;
...
}
As you can see, the width of the image I chose is wider than the height so when you use contain as a value of background-size, the image width is stretched to fit the browser width but the height is short and you can see the same image repeating a second time which is the default behavior.
Let’s fix that.
Use background-repeat: no-repeat CSS property to the .bg-container to get rid of the repeated images at the bottom.
.bg-container {
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg");
background-size:contain;
background-repeat:no-repeat;
...
}
As I mentioned before, the image I chose is wider than higher, so in this case, it’s obvious to use background-size:cover in order to fill the screen nicely with the image.
.bg-container {
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg");
background-size:cover;
background-repeat:no-repeat;
...
}
Recommended
Must-Know CSS Flexbox Responsive Multi-Column Layout Explained
Center Background Image
This is good but what if I want to show a specific part of the image rather than the default?
Well…we can do this easily using the background-position property.
Let’s say I want to center the tree to the viewport. To do that, all I have to do is add center center as the value to the background-position property inside the .bg-container.
.bg-container {
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg");
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
...
}
Alternatively, if you want to show the top left side of the image, you guessed it…the value of the background-position will be top left, and so on!
There you have it!