Fix janky header image display

This commit is contained in:
2019-11-14 02:23:09 +00:00
parent 9e79cc2d24
commit ab31c1902e
5 changed files with 34 additions and 31 deletions

View File

@ -48,34 +48,36 @@
/* Main */
#main {
> header:before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: -1;
display: block;
background-image: inherit;
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
filter: blur(3px) brightness(40%);
}
> header {
@include padding(12em, 0);
position: relative;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
z-index: -2;
> * {
position: relative;
z-index: 1;
}
.header-image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
z-index: 0;
filter: blur(3px) brightness(40%);
}
h2 {
font-size: 1.75em;
margin: 0 0 (_size(element-margin) * 0.25) 0;