Blur background image
This commit is contained in:
parent
22d5216520
commit
ac3d97951c
@ -102,11 +102,8 @@ img {
|
||||
header {
|
||||
position: relative;
|
||||
min-height: 35em;
|
||||
background-image: url('img/panorama.jpg');
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
|
||||
.wrap {
|
||||
padding: 5em 1em;
|
||||
@ -120,6 +117,23 @@ header {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('img/panorama.jpg');
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
filter: blur(4px);
|
||||
transform: scale(1.1); // Fix borders created by the blur
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
Loading…
Reference in New Issue
Block a user