Full Screen Background Image? (Dawn)

Shopify Discussion
1

Hello, I am trying to make the background of my home page a full screen image, however on some resolutions the image does not scale correctly which leaves a massive white space like this:

Screenshot_2.png
Screenshot_2.png1918×948 235 KB

Any idea how to fix this? Store is https://au-ther.com/ and no password. Thank you!

2

Hi @blake1798 ,

Glad to support you today.

You can check out my suggestion below to get your concern resolved.

  1. Go to Edit code on Online Store:

GemPages_0-1674011325135.png
GemPages_0-1674011325135.png400×162 25.3 KB

  1. add my code above the tag on Theme.liquid:

Eg:

GemPages_1-1674011360012.png
GemPages_1-1674011360012.png1209×887 22.2 KB

I hope you find the answer helpful.

Kind & Best regards,
GemPages Support Team.

3

Hi @blake1798

Please follow these steps:

  • Step 1: At Shopify Admin, Choose Online Store → Themes → Edit Code

view - 2023-01-18T104100.663.png
view - 2023-01-18T104100.663.png1907×917 75.9 KB

  • Step 2: Find and open the file base.css and add this code at the end of the file:
.banner {
    height: calc(100vh - 55px);
}

.banner__media.media.banner-home-page {
    height: 100% !important
}
  • Step 3: Save your code and check the result.

I hope that it will work for you.