Image banner full width (encompasses header & footer)

Solved

Image banner full width (encompasses header & footer)

TBrajkov24
New Member
6 0 0

Hello,

 

 I'm in the process of creating a website for my brand but cannot figure out how to make my image banner full screen. Below is two photos...the top one is how I want it to look...the user cannot scroll down or move anything on the front page which is how I want it, the main page image encompasses the entire front page including the header and footer (see Aimeleondore.com home page to see what I mean). The picture after is how it looks now, notice the image doesn't go all the way to the bottom of the screen.

 

any help is appreciated. thanks,

Thomas

 

 

Main page banner Aime leon dore.jpg

TBrajkov24_0-1700370996698.png

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
8382 1650 1662

This is an accepted solution.

Hi @TBrajkov24 

I got your meaning. I did not see the example website you attached in the first message. 

Go to your Online store > Themes > Edit code > open theme.liquid file, add the below code after <head> tag

<style>
#Banner-template--20880016900379__2084ca83-7b1a-420d-a85c-4082410c6ea7 {
height: 100vh;
}
</style>

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 6 (6)

Dan-From-Ryviu
Shopify Partner
8382 1650 1662

Please share your store link please.

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

TBrajkov24
New Member
6 0 0

hello,

 

here it is... https://tomjacobs.com.au/

Dan-From-Ryviu
Shopify Partner
8382 1650 1662

Hi @TBrajkov24 

I cannot see your banner image

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

TBrajkov24
New Member
6 0 0

hello, I changed the image now to a generic photo so you can see better here's a screenshot of the banner below (sand)

TBrajkov24_0-1701336815385.png

 

Dan-From-Ryviu
Shopify Partner
8382 1650 1662

This is an accepted solution.

Hi @TBrajkov24 

I got your meaning. I did not see the example website you attached in the first message. 

Go to your Online store > Themes > Edit code > open theme.liquid file, add the below code after <head> tag

<style>
#Banner-template--20880016900379__2084ca83-7b1a-420d-a85c-4082410c6ea7 {
height: 100vh;
}
</style>

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

TBrajkov24
New Member
6 0 0

worked, thanks heaps!!

How can I do the same thing for Phone users but keep the same image? it still has the issue for phone. assuming cause its a vertical display and not landscape.