[myob9a]

I am running Kahuna No_Link and have an issue with banners in some browsers. The header is set at 1920×325 as are the banner image sizes. Media library shows the images as 1920v325. There are two banners set at random.

They display fine in Edge and Firefox but are total distorted in Chrome, Safari and Opera.

Any thoughts or suggestions how to ensure they display correctly would be welcome.

Website: www.cla.williamsonau.com/cla

[Zed]

There is a known limitation in Safari not being able to correctly handle background images that are set both as fixed and cover, but I am not aware of issues with images in Chrome and Opera.

Try this CSS:
body #masthead .header-image { background-size: contain; }

---

If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.

[myob9a]

Nearly did the trick, but the image top (say 80px) is at the bottom of the image. See url. I have no additional CSS code that modifies the classes you have used.

It distorts also in Firefox with that change.

Thoughts

Website: www.cla.williamsonau.com/cla/contacting-cla

[myob9a]

Tried this on another site with different content with the same result.

This issue is now the only thing holding back a ‘go-live’ update to the site.

[weslley]

I’m having distortion issues with the main image of the site, only in the browser does not match. How to proceed?

Website: morenaraizblog.com.br

• This reply was modified 6 years ago by weslley.

[Zed]

@myob9a, I don’t understand what you mean by “the image top (say 80px) is at the bottom of the image”

@weslley, try switching the header image mode to Contained.

---

If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.

[tallas94]

body #masthead
.header-image {
background-size: initial;
background-position: 50% 25%;

[tallas94]

Or

body #masthead
.header-image {
background-size: 1920px 350px;
background-position: 50% 25%;

[Author]

Posts