(Refresh 8.0.1) Parallax scrolling for Image Banner

Store Design
, ,
1

Hello there,

Would like to parallax scroll the first image of an image banner.

Have tried {background-attachment: fixed;} in the custom css section, but it doesn’t work.

Ideally would like to have a full width parallax scroll for the first image, and a smaller second image (logo) overlay, without parallax scroll.

Any assistance would be much appreciated!

2

Figure it has something to do with the code below, but clueless as to what to edit.


  {%- if section.settings.image != blank -%}
    

      {%- liquid
        assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
        if section.settings.image_2 != blank
          assign image_class = 'banner__media-image-half'
        endif
        if section.settings.image_2 != blank and section.settings.stack_images_on_mobile
          assign sizes = '(min-width: 750px) 50vw, 100vw'
        elsif section.settings.image_2 != blank
          assign sizes = '50vw'
        else
          assign sizes = '100vw'
        endif
      -%}
      {{
        section.settings.image
        | image_url: width: 3840
        | image_tag:
          loading: 'lazy',
          width: section.settings.image.width,
          height: image_height,
          class: image_class,
          sizes: sizes,
          widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
    
              }}
    

  {%- elsif section.settings.image_2 == blank -%}
    
      {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
    

  {%- endif -%}
  {%- if section.settings.image_2 != blank -%}
    
      {%- liquid
        assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
        if section.settings.image != blank
          assign image_class_2 = 'banner__media-image-half'
        endif
        if section.settings.image != blank and section.settings.stack_images_on_mobile
          assign sizes = '(min-width: 750px) 50vw, 100vw'
        elsif section.settings.image != blank
          assign sizes = '50vw'
        else
          assign sizes = '100vw'
        endif
      -%}
      {{
        section.settings.image_2
        | image_url: width: 3840
        | image_tag:
          loading: 'lazy',
          width: section.settings.image_2.width,
          height: image_height_2,
          class: image_class_2,
          sizes: sizes,
          widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
      }}
3

Hi @choosarang :waving_hand:

I think that would require some custom CSS code. Can you please share the page URL?