Blur background image

This commit is contained in:
Emil Miler 2024-01-10 12:36:53 +01:00
parent 22d5216520
commit ac3d97951c

View File

@ -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%;