How can I achieve an endless scroll effect on my Sense theme?

[asmontie12]

Hi everyone. I want to have a sort of endless scroll on my sense theme. The background is choppy, but I want one full image that stays while the tiles scroll away.

here is the URL: https://alittlesoapshop.com/

body:

{% include ‘70sbackgroundimage’ %}

{{ “accessibility.skip_to_text” | t }}

{%- if settings.cart_type == ‘drawer’ -%}
{%- render ‘cart-drawer’ -%}
{%- endif -%}

{% sections ‘header-group’ %}

{{ content_for_layout }}

{% sections ‘footer-group’ %}

• {{ 'accessibility.refresh_page' | t }}
• {{ 'accessibility.link_messages.new_window' | t }}

{%- if settings.predictive_search_enabled -%}

{%- endif -%}

70sbackgroundimage:
html, body,
[id*=‘shopify-section’]:not([id*=‘announcement’]):not([id*=‘header’]):not([id*=‘footer’]),
[id*=‘shopify-section’]:not([id*=‘announcement’]):not([id*=‘header’]):not([id*=‘footer’])> [class*=‘background’]{
background: url(“https://cdn.shopify.com/s/files/1/0556/7102/9910/files/GreenOrangeBackground.jpg?v=1680393348”) !important;
}

Thank you!

[EcomGraduates]

you can try using a plugin or custom code that allows for infinite scrolling. As for the background image, it seems like you have already added a custom code for it in the 70sbackgroundimage section.

To have a full image that stays while the tiles scroll away, you can set the background image to cover the full viewport and set the background-attachment property to fixed. This will ensure that the background image remains in place while the rest of the content scrolls away.

example code snippet that you can try adding to your CSS:

body.gradient {
background-image: url("https://cdn.shopify.com/s/files/1/0556/7102/9910/files/GreenOrangeBackground.jpg?v=1680393348");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

Make sure to replace the image URL with your own background image URL.

[asmontie12]

Thank you!

What if I wanted to make my featured productssection transparent?