Ein Hero-Image-Header mit Parallax-Effekt
.inside-header {
background-image: url(headerimage.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
/*height: 300px;*/
min-height: 500px;
background-attachment: fixed; /* Parallax-Effekt */
}Über eine Media-Query kann ggf. bei einer anderen Bildschirmauflösung oder -größe ein anderes Bild verwendet werden.
.img {
background-image: url(examples/images/image-384.jpg);
}
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.img {
background-image: url(examples/images/image-768.jpg);
}
}.img {
background-image: url(medium.jpg);
}
@media (min-width: 800px) {
.img {
background-image: url(large.jpg);
}
}
@media (min-width: 1000px) {
.img {
background-image: url(extralarge.jpg);
}
}Fundstelle: https://css-tricks.com/responsive-images-css/