I’m making a landing page with a hero section with water ripple effect using a clonable project https://webflow.com/website/js-ripple-effect?s=js-ripple-effect and I’ve been having an issue with centering the background image.
https://water-ripple-effect-0e0d58.webflow.io/ On mobile version you can see only the left part of the image used and I need to center it. I’m bad at coding (oh, I wish I wasn’t), so I’m asking for any help with this custom code thing.
The link to my project is here: https://preview.webflow.com/preview/water-ripple-effect-0e0d58?utm_medium=preview_link&utm_source=designer&utm_content=water-ripple-effect-0e0d58&preview=180b8087ce3fe8b25289c65385e3f0de&mode=preview
I tried typing “left 50% top 50%” and “left: 50%; top: 50%” into this HTML embed and the first one looked well in the preview mode, but it broke the picture after publishing (it looked like lots of horizontal colorful lines)… I guess I’m doing it wrong.
I appeciate any help or information. Thanks!