Implement adaptive background images for mobile and desktop

- Add desktop.webp (2732x1535) for desktop devices and mobile.webp (556x1535) for mobile
- Create adaptive-background.css with media queries (max-width: 736px for mobile)
- Update config.toml to use desktop.webp as default background
- Modify htmlhead.html to include adaptive-background.css
- Update preload-images.html for responsive image preloading
- Optimize background loading based on device screen width

Both images include overlay.png and gradient overlay for consistent design.
Mobile version (124 KB) is 5.8x lighter than desktop version (716 KB).

config.toml

@@ -17,7 +17,7 @@ disableKinds = ["taxonomy", "term"]
  favicon = "https://s3.regru.cloud/sleeptrip-dev/images/favicon.ico"
   # set to change date format
  dateFormat = "2 January 2006"
- backgroundPath = "images/DESKTOP_NEW_1.webp"
+ backgroundPath = "images/desktop.webp"
 
 # Below parameters can be set to override default post settings
 # [params.posts]

layouts/partials/preload-images.html

@@ -4,6 +4,9 @@
 {{- end }}
 
 {{- if .IsHome }}
-<!-- Preload background image -->
+<!-- Preload background images for adaptive loading -->
+<link rel="preload" as="image" href="images/desktop.webp" media="(min-width: 737px)">
+<link rel="preload" as="image" href="images/mobile.webp" media="(max-width: 736px)">
+<!-- Fallback preload -->
 <link rel="preload" as="image" href="{{ .Site.Params.backgroundPath }}">
 {{- end }}

layouts/partials/seasonal-background.html

@@ -45,5 +45,5 @@ images/DESKTOP_NEW_1.jpg
 {{- end -}}
 */}}
 
-{{/* СТАТИЧЕСКИЙ ЗИМНИЙ ФОН */}}
-images/bg-winter.webp
+{{/* DESKTOP ФОН - АДАПТИВНЫЙ */}}
+images/desktop.webp

static/css/adaptive-background.css

@@ -0,0 +1,34 @@
+/* Adaptive Background Images for Mobile and Desktop */
+
+/* Mobile devices (max-width: 736px) - Use mobile.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/mobile.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;
+  }
+}

themes/hugo-theme-massively/layouts/partials/htmlhead.html

@@ -35,5 +35,6 @@
 		<link rel="stylesheet" href="/css/forms.css">
 		<link rel="stylesheet" href="/css/page-spacing.css">
 		<link rel="stylesheet" href="/css/mobile-menu.css">
+		<link rel="stylesheet" href="/css/adaptive-background.css">
 		{{ partial "htmlhead.custom.html" }}
 	</head>