Hero image shows up too large after published compared to how it looks in Designer

[khua (Katie Huang)]

Hi, looking for help on what’s wrong with the hero section image. I will admit I’m pretty new to Webflow, so a lot of the layout/structure might not be optimized.

This is what it should look like:

It loads correctly for a split second on the live site but then turns into this:

---

Here is my site Read-Only: https://preview.webflow.com/preview/test-2-8fe686?utm_medium=preview_link&utm_source=designer&utm_content=test-2-8fe686&preview=e10c23f58ffa9106a69149b17048fca1&workflow=preview

Live staging site (staging so I can test things): https://test-2-8fe686.webflow.io/

[webdev (Jeff Selser)]

Ditch the ripples and your background will magically display correctly.

[khua (Katie Huang)]

the ripples was a cloneable that the owner likes. the thing is it used to display correctly, but somewhere along the edits i made it stopped doing so

[khua (Katie Huang)]

@webdev by any chance, do you know where I can remove the ripples? not sure how to remove a cloneable.

[mkukulka (Maciej Kukulka)]

Hi @khua

Ripples are a part of the image. You can’t remove them just like that.
BUT

To have a nice image of the mountains and ripples you have to choose the element with the Hero class:

click on the image “wayne-zheng…” on the Background section and choose Cover.