944a9796d8
added 3 ways for full page background image removed comments, updated links to github markdown style
85 lines
1.7 KiB
Markdown
85 lines
1.7 KiB
Markdown
---
|
|
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](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:
|
|
|
|
```
|
|
<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](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/)
|
|
|