Change header images

images/headers/readme.txt

@@ -0,0 +1,9 @@
+ Each set of header images should contain the following image widths.  The minimum height should be 275px.
+
+  - 4096
+  - 2800
+  - 1920
+  - 1024
+  - 800
+  - 500
+  - 300

style/new_style.css

@@ -17,7 +17,6 @@ body {
 /* PAGE HEADER */
 .header_image {
     background-color: rgb(29,49,49);
-    background-image: url("/images/headers/index/index_1024.webp");
     background-repeat: no-repeat;
     background-position: top;
     background-size: cover;
@@ -29,10 +28,14 @@ body {
     position: sticky;
     top: -145px;
 }
-#header_index{background-image: url("/images/headers/index/index_1024.webp")}
+#header_index{background-color: #a04911}
-@media(min-width: 1025px){#header_index{background-image: url("/images/headers/index/index_1920.webp")}}
+@media(min-width: 100px){#header_index{background-image: url("/images/headers/index/300.webp")}}
-@media(min-width: 1921px){#header_index{background-image: url("/images/headers/index/index_2800.webp")}}
+@media(min-width: 301px){#header_index{background-image: url("/images/headers/index/500.webp")}}
-@media(min-width: 2801px){#header_index{background-image: url("/images/headers/index/index_4096.webp")}}
+@media(min-width: 501px){#header_index{background-image: url("/images/headers/index/800.webp")}}
+@media(min-width: 801px){#header_index{background-image:url("/images/headers/index/1024.webp")}}
+@media(min-width:1025px){#header_index{background-image:url("/images/headers/index/1920.webp")}}
+@media(min-width:1921px){#header_index{background-image:url("/images/headers/index/2800.webp")}}
+@media(min-width:2801px){#header_index{background-image:url("/images/headers/index/4096.webp")}}
 #page_title { /* This may be best floating above content div rather than inside header div */
     background-color: #2f4f4f8f;
     font-family: indie-flower, cursive;