Make image banner fixed to full screen regardless of display size

Solved

Make image banner fixed to full screen regardless of display size

Vilgot
Tourist
8 0 4

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

Accepted Solution (1)
PageFly-Richard
Shopify Partner
4712 1077 1742

This is an accepted solution.

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

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

<style>
header {
    position: fixed;
    top: 39px;
    z-index: 99;
    background: #fff;
}
 </style>

Or reduce the height

<style>
.banner {
height: 95vh; // vh mean viewport height and will fit to every screen
}
</style>

Hope this can help you solve the issue

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 6 (6)
Vilgot
Tourist
8 0 4

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

PageFly-Richard
Shopify Partner
4712 1077 1742

 

Hi @Vilgot 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> 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 </head>

<style>
.banner {
height: 100vh; // vh mean viewport height and will fit to every screen
}
</style>

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

Vilgot
Tourist
8 0 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

PageFly-Richard
Shopify Partner
4712 1077 1742

This is an accepted solution.

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

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

<style>
header {
    position: fixed;
    top: 39px;
    z-index: 99;
    background: #fff;
}
 </style>

Or reduce the height

<style>
.banner {
height: 95vh; // vh mean viewport height and will fit to every screen
}
</style>

Hope this can help you solve the issue

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

GiudFabri123
Excursionist
24 0 2

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!

Ivo-Colmenares
Visitor
1 0 0

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