How can I make my landing page image banner fade at the bottom?

Store Design
1

Hey there!

I’m trying to get the image banner on my landing page to fade off at the bottom. Just as a call out— I have the multicolumn (product cards) overlayed on the image banner and would like the image banner to fade off as the product cards overlay the banner. I would also like the same effect to show if the screen width is less than 750px, essentially to show the same effect on mobile.

Site: https://coffeeinboxes.com/

Password: canaveral10

Any help is greatly appreciated! Thanks.

2

Hi @SantosBaez

Please follow these steps:

Go to Admin => Online Store => Theme => Edit Code. Then, find the file section-image-banner.css and paste the following CSS at the end of the file:

#Banner-template--17436260401457__b5179f97-1f1a-4c70-96f7-89fa29e09f1f::after {
    opacity: 1 !important;
    background: linear-gradient(to top, #faf6f1, transparent) !important;
}

I hope that it will work for you. If you need further help, please let us know.

1 Like