Add new sizes for index header image

This commit is contained in:
Fred Boniface 2022-10-20 21:21:53 +01:00
parent d086e2f0df
commit f1dfed80b3
11 changed files with 9 additions and 2 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 252 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 881 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

View File

Before

Width:  |  Height:  |  Size: 14 MiB

After

Width:  |  Height:  |  Size: 14 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 MiB

View File

@ -7,9 +7,9 @@ body {
background-color: lightslategrey;
}
/* PAGE HEADER */
#header_image_home { /* Try z-index: -1; to have content scrolling over - margins will need adjusting */
#header_image_home {
background-color: rgb(29,49,49);
background-image: url("/images/headers/index/index_w750.jpg");
background-image: url("/images/headers/index/index_360.webp");
background-repeat: no-repeat;
background-position: top;
background-size: cover;
@ -21,6 +21,13 @@ body {
position: sticky;
top: -145px;
}
@media(min-width: 361px){#header_image_home{background-image:url("/images/headers/index/index_400.webp")}}
@media(min-width: 401px){#header_image_home{background-image:url("/images/headers/index/index_480.webp")}}
@media(min-width: 481px){#header_image_home{background-image:url("/images/headers/index/index_810.webp")}}
@media(min-width: 811px){#header_image_home{background-image:url("/images/headers/index/index_1024.webp")}}
@media(min-width: 1025px){#header_image_home{background-image:url("/images/headers/index/index_1920.webp")}}
@media(min-width: 1921px){#header_image_home{background-image:url("/images/headers/index/index_2800.webp")}}
@media(min-width: 2801px){#header_image_home{background-image:url("/images/headers/index/index_4096.webp")}}
#page_title { /* This may be best floating above content div rather than inside header div */
background-color: #2f4f4f8f;
font-family: sans-serif;