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

mgrp · ‎03-30-2024

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

ThePrimeWeb · ‎03-30-2024

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.

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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

View solution in original post

mgrp · ‎03-30-2024

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 · ‎03-30-2024

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

Raj-webdesigner · ‎03-30-2024

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 :-[email protected]

ThePrimeWeb · ‎03-30-2024

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? [email protected] or check out the website
Check out our interview with Shopify!

mgrp · ‎03-30-2024

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 · ‎03-30-2024

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.

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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

mgrp · ‎03-30-2024

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

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