Blur background image
This commit is contained in:
parent
22d5216520
commit
ac3d97951c
@ -102,11 +102,8 @@ img {
|
|||||||
header {
|
header {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 35em;
|
min-height: 35em;
|
||||||
background-image: url('img/panorama.jpg');
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
padding: 5em 1em;
|
padding: 5em 1em;
|
||||||
@ -120,6 +117,23 @@ header {
|
|||||||
&::before {
|
&::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
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;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
Loading…
Reference in New Issue
Block a user