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 and I’ve been having an issue with centering the background image. 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:

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( center top   / cover;"></div>

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

1 Like

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.


1 Like

Thank you @ChrisT !!!
It works really really perfect!!! :heart_eyes: