How can I make the two images extend all the way to the bottom of the homepage ?

Solved

How can I make the two images extend all the way to the bottom of the homepage ?

MaisonBillonDon
Explorer
86 0 15

I want the background images on the main page to extend down to the very bottom of the page. How can I do that on my homepage code? I've included an example of how my password page looks, so you understand what I mean when I say, I want the background images on my homepage to extend all the way to the bottom of the page instead of the ugly footer thats already there. The first photo is my password page where the background image is full bleed, and extends all the way to the bottom of the page. The second image is my homepage where both the images on the background do not extend to the very bottom of the page.  

 

My theme is Origin. URL: billon.maisonScreenshot 2025-01-12 at 4.58.43 PM.pngScreenshot 2025-01-12 at 4.55.25 PM.png

Bravo Billón
Accepted Solution (1)

theycallmemakka
Shopify Partner
1789 435 462

This is an accepted solution.

Hi @MaisonBillonDon ,

 

 

I have written custom CSS for this solution. Please follow below steps and let me know your feedback.

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find password.liquid file

4) Add the following code just above tag </body>

 

<style>
#MainContent {
    position: absolute !important;
    height: 100vh !important;
    width: 100vw !important;
}

.shopify-section-group-footer-group {
    position: absolute !important;
    bottom: 0px !important;
    width: 100% !important;
}

.shopify-section-group-footer-group footer,
.field__input, 
.select__select, 
.customer .field input, 
.customer select {
    background-color: transparent !important;
}

@media screen and (min-width: 750px) {
    .banner--large:not(.banner--adapt) {
        min-height: 100vh !important;
    }
}

@media screen and (max-width: 749px) {
    .banner--large.banner--mobile-bottom:not(.banner--adapt) .banner__media,
    .banner--large.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
        height: 50vh !important;
    }
}

@media screen and (max-width: 749px) {
    footer {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

</style>

 

theycallmemakka_0-1736737346889.png

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 6 (6)

mageplaza-cs
Shopify Partner
334 25 59

Hi @MaisonBillonDon,

I am from Mageplaza - Shopify solution expert.

 

To achieve your requirement, you need to modify the CSS. Here are some steps you can follow:

 

1. Go to the Shopify Admin Panel

  • Log in to your Shopify admin dashboard.
  • Navigate to Online Store > Themes > Click Theme Settings > Expand Custom CSS.

mageplazacs_1-1736736520429.png

2. Add custom CSS: 

 

.banner {
    position: absolute;
    width: 100%;
    height: 100%;
}
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: transparent;
}

 

Here is the result:

mageplazacs_2-1736736703155.png

Please leave a comment if it functions as you expected. 🙂

 

Mageplaza | Top-Rated Shopify Agency | Trusted by 230,000+ worldwide merchants


If our suggestion works for you, please give it a Like or mark it as a Solution!


Should you have any questions or concerns, feel free to contact us via consultant@mageplaza.com

MaisonBillonDon
Explorer
86 0 15

This did not work unfortunately. I've attached a photo of what your solution looks like. Screenshot 2025-01-14 at 9.17.57 AM.png

Bravo Billón

theycallmemakka
Shopify Partner
1789 435 462

This is an accepted solution.

Hi @MaisonBillonDon ,

 

 

I have written custom CSS for this solution. Please follow below steps and let me know your feedback.

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find password.liquid file

4) Add the following code just above tag </body>

 

<style>
#MainContent {
    position: absolute !important;
    height: 100vh !important;
    width: 100vw !important;
}

.shopify-section-group-footer-group {
    position: absolute !important;
    bottom: 0px !important;
    width: 100% !important;
}

.shopify-section-group-footer-group footer,
.field__input, 
.select__select, 
.customer .field input, 
.customer select {
    background-color: transparent !important;
}

@media screen and (min-width: 750px) {
    .banner--large:not(.banner--adapt) {
        min-height: 100vh !important;
    }
}

@media screen and (max-width: 749px) {
    .banner--large.banner--mobile-bottom:not(.banner--adapt) .banner__media,
    .banner--large.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
        height: 50vh !important;
    }
}

@media screen and (max-width: 749px) {
    footer {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

</style>

 

theycallmemakka_0-1736737346889.png

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

MaisonBillonDon
Explorer
86 0 15

This worked but I had to make sure I copy and pasted the code into the theme.liquid file since the homepage was what I wanted to change. Thank You!

Bravo Billón

GTLOfficial
Shopify Partner
769 160 169

Hello @MaisonBillonDon 
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

#Banner-template--15894320840770__image-banner {
position: absolute;
width: 100%;
height: 100%;
}
#shopify-section-sections--15894318022722__footer {
position: absolute;
bottom: 0;
width: 100%;
background: transparent;
}

thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
MaisonBillonDon
Explorer
86 0 15

This did not work unfortunately. 

Bravo Billón