diff --git a/www/scss/search.scss b/www/scss/search.scss
index f71d105c9b343f62703626c5d0556d573d741138..200ce981a51acbe91bc701178b55058c81ca89e9 100644
--- a/www/scss/search.scss
+++ b/www/scss/search.scss
@@ -16,6 +16,47 @@
   text-align: center;
 }
 
+.search-bg {
+  background-image: url('../images/search-bg-640.jpg');
+
+  @media (min-width: 640px) { background-image: url('../images/search-bg-960.jpg'); }
+  @media (min-width: 960px) { background-image: url('../images/search-bg-1280.jpg'); }
+  @media (min-width: 1280px) { background-image: url('../images/search-bg-1920.jpg'); }
+  @media (min-width: 1920px) { background-image: url('../images/search-bg-2560.jpg'); }
+
+  @media
+  only screen and (-webkit-min-device-pixel-ratio: 2),
+  only screen and (min-resolution: 192dpi),
+  only screen and (min-resolution: 2dppx) {
+    background-image: url('../images/search-bg-1280.jpg');
+
+    @media (min-width: 640px) { background-image: url('../images/search-bg-1920.jpg'); }
+    @media (min-width: 960px) { background-image: url('../images/search-bg-2560.jpg'); }
+  }
+
+}
+
+
+.webp .search-bg {
+  background-image: url('../images/search-bg-640.webp');
+
+  @media (min-width: 640px) { background-image: url('../images/search-bg-960.webp'); }
+  @media (min-width: 960px) { background-image: url('../images/search-bg-1280.webp'); }
+  @media (min-width: 1280px) { background-image: url('../images/search-bg-1920.webp'); }
+  @media (min-width: 1920px) { background-image: url('../images/search-bg-2560.webp'); }
+
+  @media
+  only screen and (-webkit-min-device-pixel-ratio: 2),
+  only screen and (min-resolution: 192dpi),
+  only screen and (min-resolution: 2dppx) {
+    background-image: url('../images/search-bg-1280.webp');
+
+    @media (min-width: 640px) { background-image: url('../images/search-bg-1920.webp'); }
+    @media (min-width: 960px) { background-image: url('../images/search-bg-2560.webp'); }
+  }
+
+}
+
 
 #searchform .dcf-input-group {
   margin: 0 auto;