Make image banner fixed to full screen regardless of display size

Store Design
, ,
1

Hi everyone! I am currently trying to make my image banner exactly cover the whole screen. Right now my banner fits almost perfectly on my laptop but when I use my pc (which has a bigger display) the banner changes size. I basically want to keep the proportion of my image banner the same covering the full screen exactly regardless of the display size. Any ideas on how to make the image banner fixed size?

This is how I want it: https://djerfavenue.com/en-eu/

You can see on the site above that it is not bigger than the display or smaller, perfectly fitting regardless of the display size

My site: https://sunbelezza.myshopify.com/?_ab=0&_fd=0&_sc=1

2

Thanks for the reply! Responsive images sounds like the right solution. Do you know the line of code in order to accomplish that?

3

Hi @Vilgot

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Richard | PageFly

4

Hi Richard!

Thank you so much for the reply! This worked, now the picture is covering the full screen. The only issue is that the banner is slightly bigger than the display when including the header. I want the banner and the header to cover the full display at the same time so on the first down-scroll on the homepage the image banner ends. Right now the image banner is covering the full screen only when scrolling past the header. Any ideas?

Best regards,

Vilgot

5

Hi @Vilgot There are two ways for you to solve this

  1. Make the header fixed and the height become zero:

Or reduce the height

Hope this can help you solve the issue

6

Also you can use the next code.

.gradient {
background: var(–gradient-background) url(Paste URL of pic) fixed top left/cover !important;
background-color: transparent !important;
}

This code will need to be put in the “Assets” folder. I just put it in the last line of the code so I can look for it more easier. Also remember to paste the location of you image, so will need to delete “url(Paste URL of pic)” and paste the URL of your picture. This will put the whole image in the background as you can see in the next picture, I hope this will help everybody.

IvoColmenares_0-1709644963663.png
IvoColmenares_0-1709644963663.png1920Ă—911 247 KB

7

Hello Richard, this works perfect on PC but then on a mobile version leaves a big white blank chunk empty, is there anything that can make this work for both ? thank you!

8

Can you share the code please