freeCodeCamp/guide/english/css/tutorials/perfect-full-page-background-image/index.md

title

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:

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

css:

.bg-image
{
  background-size: cover;
  background-image: url('myimage.jpg');
  height: 100vh;
}

Codepen for solution 1

Solution 2

This uses the image as a background for the div. This solution allows you to add content down.

html:

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

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

Solution 3 credits

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

More Information:

• How TO - Full Page Image
• CSS-Tricks - Perfect Full Page Background Image