1.7 KiB
1.7 KiB
| 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;
}
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;
}
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;
}