Files
ptp/static/css/adaptive-background.css
T
2026-01-15 22:24:06 +03:00

35 lines
1.1 KiB
CSS
Executable File

/* Adaptive Background Images for Mobile and Desktop */
/* Mobile devices (max-width: 736px) - Use mobile4.webp */
@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/mobile4.webp') !important;
background-size: cover;
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;
}
}