[cfarivar]

Hi,

In desktop, my site doesn’t fully show the entire background image (unless Safari). On mobile it looks fine, though! Any idea why?

Website: cyrusfarivar.com/blog

[Zed]

The display mode is dependent on the aspect ratio of the used image in comparison to the area it is displayed in. The image is almost square while it needs to be displayed in a wide rectangle (the screen), leading to vertical cropping.

I suggest using an image with a similar aspect ratio as the area it is displayed in.

---

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.

[cfarivar]

But why does it render properly in some browsers and not others?

[Zed]

If you’re comparing it to Safari, on Safari we disable the special positioning and turn it into a plain background image because Safari has issues rendering images that are both cover-sized and fixed.

---

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.

[cfarivar]

Ok, so what is the best way to make the image render properly across all browsers? Does it need to be a certain size?

[Author]

Posts