---
title: Perfect Full Page Background Image
---
## Perfect Full Page Background Image
Here is three ways you can achieve the full page background image and I listed the advantage of each solution.
### Solution 1
The advantages of this solution:
* fits to specific viewports
* perfect for hudge banner image
* still allows you to add content after
* no whitespace in the viewport.
html:
```
```
css:
```
.bg-image
{
background-size: cover;
background-image: url('myimage.jpg');
height: 100vh;
}
```
[Codepen for solution 1](https://codepen.io/takachou/pen/pxVPGY/)
### Solution 2
This uses the image as a background for the div. This solution allows you to add content down.
html:
```
```
css:
```
body, html {
height: 100%;
}
.bg-image {
background-image: url("myimage.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
```
[Codepen for solution 2](https://codepen.io/takachou/pen/gBzRwK)
### Solution 3 [credits](https://css-tricks.com/perfect-full-page-background-image/)
This Solution contains some specifics:
* Fills entire page with image, no white space
* Scales image as needed
* Retains image proportions (aspect ratio)
```
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
```
[Codepen for solution 3](https://codepen.io/takachou/pen/bmMRgz)
#### More Information:
- [How TO - Full Page Image](https://www.w3schools.com/howto/howto_css_full_page.asp)
- [CSS-Tricks - Perfect Full Page Background Image ](https://css-tricks.com/perfect-full-page-background-image/)