Edit
.h-background-image {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 1s ease;
// set backup background color
background-color: var(--color-wmsilver-25);
background-repeat: no-repeat;
background-position: center;
// fallback image for IE 11
background-size: cover;
&.-img-lt {
// for background images
background-position: top left;
// for absolutely positioned images
// top: 0;
// left: 0;
}
&.-img-ct {
background-position: top center;
// top: 0;
// right: 0;
}
&.-img-rt {
background-position: top right;
// top: 0;
// right: 0;
}
&.-img-cl {
// for background images
background-position: center left;
// for absolutely positioned images
// top: 0;
// left: 0;
}
&.-img-cc {
background-position: center center;
// absolutely positioned elements can use
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
}
&.-img-cr {
// for background images
background-position: center right;
// for absolutely positioned images
// top: 0;
// left: 0;
}
&.-img-lb {
background-position: bottom left;
// bottom: 0;
// left: 0;
}
&.-img-cb {
background-position: bottom center;
// top: 0;
// right: 0;
}
&.-img-rb {
background-position: bottom right;
// bottom: 0;
// right: 0;
}
}
.h-background-image__img {
position: relative;
// hide from unsupported browsers
// shows the backup background image
display: none;
//use object-fit for supporting browsers
// @supports (object-fit: cover) {
// display: inline;
// width: 100%;
// height: 100%;
// object-fit: cover;
// object-position: center center;
// &--bottomright {
// object-position: bottom right;
// }
// }
}
.h-background-image--lighten::after {
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
background-color: rgba(255, 255, 255, 0.7);
}
.h-background-image--darken::after {
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
background-color: rgba(0, 0, 0, 0.7);
}
/* scss/3-helper-classes/_background-image.scss */