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

Store Design
, , , , , , ,

Topic summary

A user wants background images on their Shopify homepage to extend full-bleed to the bottom of the page, similar to how their password page displays. They’re using the Origin theme and provided screenshots showing the desired effect (password page) versus the current state (homepage with visible footer gap).

Solutions Offered:

  • CSS modifications targeting banner and footer elements with absolute positioning and transparent backgrounds
  • Multiple responders suggested adding custom CSS through either:
    • Theme Settings > Custom CSS
    • Editing base.css or theme.liquid files directly
    • Modifying password.liquid for the password page specifically

Outcome:

The user confirmed one solution worked after pasting the code into the theme.liquid file rather than password.liquid, since they needed to modify the homepage. Two other suggested solutions did not work for their specific case. The discussion appears resolved with the successful implementation.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
4

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