Hi everyone! I’ve been trying for days to get the image banner to stretch the entirety of the page as a fixed background image (I want to use the banner so it automatically adjusts on mobile) I want my page to look like this
**Reference site is aimeleondre.com
its just one image that fits both web and mobile with no scrolling
my site is https://d9423d-93.myshopify.com/ any help would be greatly appreciated
Hi there, the only settings I can change through the customize section are making the banner S/M/L nothing about making the image fit the entire screen, I don’t know if I’m missing something but don’t see anything about setting a background image or section settings
hi there, if its achievable through code, I only need that if you’re able to give me a html/css fix
it’s possible but if few changes do you in your code That possible.
Hey @mgrp ,
Do you only want to do this on your homepage like the reference?
And what’s the image you want to use? (A light coloured image is recommended because your text is black)
yes just the home page, I don’t mind changing the text color, my main goal is having the image take up the screen for both desktop and mobile, I plan on hiding the footer and moving all of those nav links into the main nav so there is nothing but the image and top menus like the reference site
Hey @mgrp ,
I still recommend getting a lighter image because your logo is also black. You’d have alot more mess to clean if you use a dark image.
You can remove the banner image in the homepage and add this code.
Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.
Screenshot is for reference only, the correct code to paste is the one shown above.
Instructions for maintaining it
The part coloured in red is the homepage url, that will make sure it only applied on the homepage. Change this when you move to your own domain.
The part highlighted in blue is the link for the image. Change this also.
OMG THANK YOU!!! ive been trying so many things all day!!! I can’t thank you enough!
Hi!
I tried your solution on my website to have the image banner overlap onto the menu header and for some reason it’s not working. Latest dawn theme, the initial cdn URL structure of the file was different from the admin. I tried your code with it with no luck, so I modified it to use yours but neither works. Can you please help? 
pass: nanny
current file URL - https://cdn.shopify.com/s/files/1/0863/7474/4395/files/launch-sale-banner.jpg?v=1728994121
My code:
html:has(link[rel="canonical"][href="[https://veroniquestudio.myshopify.com](https://veroniquestudio.myshopify.com)"]) body.gradient:before { background: url('[https://veroniquestudio.myshopify.com/cdn/shop/files/1/0863/7474/4395/files/launch-sale-banner.jpg?v=1728994121&width=3840](https://veroniquestudio.myshopify.com/cdn/shop/files/1/0863/7474/4395/files/launch-sale-banner.jpg?v=1728994121&width=3840)'); content: '' !important; height: 100% !important; width: 100% !important; position: fixed !important; top: 0 !important; left: 0 !important; z-index: -1 !important; background-size: cover !important; background-repeat: no-repeat !important; } html:has(link[rel="canonical"][href="[https://veroniquestudio.myshopify.com](https://veroniquestudio.myshopify.com)"]) .gradient:not(#menu-drawer) { background: transparent !important; }Hey thanks for coming back to me with a solution! Something seems a bit off 
It bleeds through the whole page. I just wanted to include header & whatever is for the hero image. Right now it has become a background for everything - product, images with text, announcement bar included. Please, how can I change that?
