Fixed background position ruins position of image banner

Store Design
1

Hello!

On my product page I would like to have a fixed background position for the image banner that I’m using.

This is exactly what I want it to look like (this is without animation):

image
image451×773 97.8 KB

and for some reason when I do it, this is how it looks when I actually apply the fixed background position:

image
image482×785 86.4 KB

Could someone please help me how to make it look like the first one, just with the fixed background animation? Thank you in advance!

crescent.hu

Pw: theaba

2

Hello @crescenthu

I have checked your site and noticed that the image used for mobile is not suitable. It contains an unwanted black part. Please check this screenshot: prnt.sc/1IovLPeDPtZS. Just remove the black area and upload the image again.

3

Hi @crescenthu ,
Right now there is a video in your banner, you haven’t set image in banner, and video is perfect , if u still want to add image share collaborator code.
Thanks
Manoj

4

@crescenthu ,

I really like your idea.
I’ve found a way to help you fix the product image position.
Please add the following code to your base.css file

@media screen and (max-width: 576px){
    section#shopify-section-template--25849614860636__image_banner_h4fazg {
        position: fixed;
        width: 100%;
    }    
    #shopify-section-template--25849614860636__main{
        margin-top: 400px;
    }
}

*Result:

image
image412×815 86.2 KB

image
image412×815 76.8 KB

If this works as you expected, please don’t forget to mark it as a solution.
Best regards,

5

Hi,

Hope this will help

  • Open the section file used by your banner and Add a div that will hold the fixed background

Example

<!-- inside your image banner section file -->
<div class="image-banner">
  <!-- Fixed background layer (sits behind everything) -->
  <div class="image-banner__fixed-bg"
       style="background-image: url({{ section.settings.image | img_url: '2048x' }});"></div>

  <!-- existing banner content remains unchanged -->
  <div class="image-banner__content">
    <!-- ... your current markup ... -->
  </div>
</div>
  • Add CSS (paste into assets/base.css or your theme CSS file)

CSS Example

/* fixed-bg layer sits behind the page and stays in place */
.image-banner__fixed-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;                /* full viewport height */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;                  /* behind page content */
  pointer-events: none;         /* clicks pass through */
  opacity: 0;                   /* start hidden (we'll reveal it only when banner is visible) */
  transition: opacity 250ms ease;
}

/* when the banner is in view we set opacity to 1 (JS toggles this) */
.image-banner--visible .image-banner__fixed-bg {
  opacity: 1;
}
  • Add a small JS snippet to only show the fixed image while the banner is on screen

JS Example

document.addEventListener('DOMContentLoaded', function () {
  var banner = document.querySelector('.image-banner');
  if (!banner) return;

  var io = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        banner.classList.add('image-banner--visible');
      } else {
        banner.classList.remove('image-banner--visible');
      }
    });
  }, { threshold: 0.15 });

  io.observe(banner);
});
6

This is perfect, thank you so much!