What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Image banner size for DAWN them to bleed into header and footer

Solved

Image banner size for DAWN them to bleed into header and footer

mgrp
Excursionist
22 1 3

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

Screenshot 2024-03-30 at 11.49.38 AM.png

 

 

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 

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2139 616 515

This is an accepted solution.

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 "<head>" tag paste the following. Screenshot attached for reference.

 

<style>
html:has(link[rel="canonical"][href="https://d9423d-93.myshopify.com/"]) body.gradient:before {
    background: url('https://d9423d-93.myshopify.com/cdn/shop/files/HEROIMGSS24.jpg?v=1711572597&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://d9423d-93.myshopify.com/"]) .gradient:not(#menu-drawer) {
    background: transparent !important;
}
</style>

 

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_1-1711828971748.jpeg

 

 

 

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. 

ThePrimeWeb_2-1711829032367.png

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 10 (10)
mgrp
Excursionist
22 1 3

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

mgrp
Excursionist
22 1 3

hi there, if its achievable through code, I only need that if you're able to give me a html/css fix

Raj-webdesigner
Shopify Partner
349 87 82

it's possible but if few changes do you in your code That possible.

Are you looking for Shopify Developer then your search is over I will help you


If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


ThePrimeWeb
Shopify Partner
2139 616 515

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)

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
mgrp
Excursionist
22 1 3

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 

ThePrimeWeb
Shopify Partner
2139 616 515

This is an accepted solution.

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 "<head>" tag paste the following. Screenshot attached for reference.

 

<style>
html:has(link[rel="canonical"][href="https://d9423d-93.myshopify.com/"]) body.gradient:before {
    background: url('https://d9423d-93.myshopify.com/cdn/shop/files/HEROIMGSS24.jpg?v=1711572597&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://d9423d-93.myshopify.com/"]) .gradient:not(#menu-drawer) {
    background: transparent !important;
}
</style>

 

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_1-1711828971748.jpeg

 

 

 

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. 

ThePrimeWeb_2-1711829032367.png

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
mgrp
Excursionist
22 1 3

OMG THANK YOU!!!!!!!!!!!!!!!!!!!!!! ive been trying so many things all day!!! I can't thank you enough! 

TheRitualThief
Shopify Partner
18 0 0

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: 

<style>
html:has(link[rel="canonical"][href="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...');
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"]) .gradient:not(#menu-drawer) {
background: transparent !important;
}
</style>

ThePrimeWeb
Shopify Partner
2139 616 515

Your modified code is wrong @TheRitualThief,

 

Use this,

<style>
html:has(link[rel="canonical"][href="https://veroniquestudio.myshopify.com/"]) body.gradient:before {
    background: url('https://cdn.shopify.com/s/files/1/0863/7474/4395/files/launch-sale-banner.jpg?v=1728994121');
    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/"]) .gradient:not(#menu-drawer) {
background: transparent !important;
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
TheRitualThief
Shopify Partner
18 0 0

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?