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
19 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
2138 615 494

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 7 (7)
mgrp
Excursionist
19 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
19 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
325 76 78

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
2138 615 494

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
19 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
2138 615 494

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
19 1 3

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