Shopify themes, liquid, logos, and UX
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.maison
Solved! Go to the solution
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>
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
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
2. Add custom CSS:
.banner {
position: absolute;
width: 100%;
height: 100%;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
background: transparent;
}
Here is the result:
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
This did not work unfortunately. I've attached a photo of what your solution looks like.
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>
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
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!
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
This did not work unfortunately.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025