Kirik
9727ff5dc0
- Change background-size from cover to 300% on mobile devices - Makes the image appear 3x further away - Better composition and less cropped view of the scene
35 lines
1.1 KiB
CSS
35 lines
1.1 KiB
CSS
/* Adaptive Background Images for Mobile and Desktop */
|
|
|
|
/* Mobile devices (max-width: 736px) - Use desktop.webp (same as desktop for consistency) */
|
|
@media screen and (max-width: 736px) {
|
|
#wrapper > .bg {
|
|
background-image: url('../../images/overlay.png'),
|
|
linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
|
|
url('../../images/desktop.webp') !important;
|
|
background-size: 300%;
|
|
background-position: center;
|
|
background-attachment: fixed;
|
|
}
|
|
}
|
|
|
|
/* Tablet and larger (min-width: 737px) - Use desktop.webp (already set in main.scss) */
|
|
@media screen and (min-width: 737px) {
|
|
#wrapper > .bg {
|
|
background-image: url('../../images/overlay.png'),
|
|
linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
|
|
url('../../images/desktop.webp') !important;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-attachment: fixed;
|
|
}
|
|
}
|
|
|
|
/* High DPI displays optimization */
|
|
@media
|
|
(-webkit-min-device-pixel-ratio: 2),
|
|
(min-resolution: 192dpi) {
|
|
#wrapper > .bg {
|
|
background-size: cover;
|
|
}
|
|
}
|