diff --git a/config.toml b/config.toml
index 2b01d0f..e95d18b 100644
--- a/config.toml
+++ b/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]
diff --git a/layouts/partials/preload-images.html b/layouts/partials/preload-images.html
index f74c817..e50fb86 100644
--- a/layouts/partials/preload-images.html
+++ b/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 }}
diff --git a/layouts/partials/seasonal-background.html b/layouts/partials/seasonal-background.html
index f1d442e..c640f17 100644
--- a/layouts/partials/seasonal-background.html
+++ b/layouts/partials/seasonal-background.html
@@ -45,5 +45,5 @@ images/DESKTOP_NEW_1.jpg
 {{- end -}}
 */}}
 
-{{/* СТАТИЧЕСКИЙ ЗИМНИЙ ФОН */}}
-images/bg-winter.webp
\ No newline at end of file
+{{/* DESKTOP ФОН - АДАПТИВНЫЙ */}}
+images/desktop.webp
\ No newline at end of file
diff --git a/static/css/adaptive-background.css b/static/css/adaptive-background.css
new file mode 100644
index 0000000..462351f
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/static/images/desktop.webp b/static/images/desktop.webp
new file mode 100755
index 0000000..6a01e0e
Binary files /dev/null and b/static/images/desktop.webp differ
diff --git a/static/images/mobile.webp b/static/images/mobile.webp
new file mode 100755
index 0000000..7ff421f
Binary files /dev/null and b/static/images/mobile.webp differ
diff --git a/themes/hugo-theme-massively/layouts/partials/htmlhead.html b/themes/hugo-theme-massively/layouts/partials/htmlhead.html
index 072f3a3..325ee50 100644
--- a/themes/hugo-theme-massively/layouts/partials/htmlhead.html
+++ b/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>