Is it possible to have "background-attachment: fixed" type behaviour when using "ngOptimizedImage"?

Question

I'm using Angular (v17) and trying to implement lazy loading of images as per docs, which say that

"The NgOptimizedImage does not directly support the background-image css property, but it is designed to easily accommodate the use case of having an image as the background of another element."

I've manage to implement the lazy loading of the images, but have failed to find a way to replicate the static parallax (scroll-past image) effect that I had when using the background-image with background-attachment: fixed in css.

Is there a way to create this parallax effect while using lazy image loading in Angular?

Answer 1

While ngOptimizedImage doesn't directly support the background-attachment.fixed property,Parent Container with Fixed Background:

Wrap the image in a container: Create a parent container element for the ngOptimizedImage. Apply fixed background to container: Set background-image and background-attachment: fixed on the container element, using a placeholder image or placeholder color initially. Load image into container: Load the actual image using ngOptimizedImage within the container.

.fixed-background-container {
  background-image: url('placeholder-image.jpg'); /* Placeholder until image loads */
  background-attachment: fixed;
  width: 100%;
  height: 500px; /* Adjust as needed */
}

<div class="fixed-background-container">
  <ng-optimized-image [src]="imageUrl"></ng-optimized-image>
</div>