Streaming live at 10am (PST)

Center the background image which is an HTML embed

Hey guys,
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! :pray:

Hi Anastasiia,

the positioning of your background image needs to be set differently.

Try this embed:

<div id="ripple" style="height:100%; Width: 100%; position: absolute; left 0%; top: 0%; right: 0%; bottom: 0%; background: url(https://i.ibb.co/bFnyynb/people-1-min.jpg) center top   / cover;"></div>

Changed it from “left top” to “center top”. :wink:

Chris, thank you so much!!! It works perfect! :bowing_woman:
Oh, if you could imagine my relief now :sweat_smile: :relieved: THANKS!

Haha, you are welcome!

It’s a nice effect by the way, would love to see the final website if you don’t mind sharing it.

:blush:

1 Like