1

The background image is attached to a div with a fixed attachment and a top radius of 50px. However, during scroll, it gets warped. When I removed the fixed attachment, it worked fine. But with the fixed attachment, it warps backward, creating a 3D effect. This effect only triggers when the div is a percentage down the viewport. The width of the viewport also affects how big or small this percentage is.

I want to avoid the warping or make it happen when the div enters the viewport instead of the sudden transition that starts the warping almost halfway down the viewport.

<div className="text-white h-[90vh] w-[100%] **bg-[url('src/assets/ContactSection/contactBg.jpg')]** bg-cover  **bg-fixed** flex flex-col justify-between  **rounded-t-[100px]**  ">
Benjamin Buch
  • 4,752
  • 7
  • 28
  • 51
Lakindu Rathmanagolla
  • 11
  • 2
  • try using executable code snippets demonstratings your two cases and for the images, use [lorem ipsum](https://picsum.photos/) image souces instead of your local ones. – Abdelrahman Apr 22 '23 at 12:21
  • Please provide enough code so others can better understand or reproduce the problem. – Community Apr 22 '23 at 14:01

0 Answers0