Background image cut off

Forums » WordPress » Tempera » How To

  • Author
    Posts
  • September 23rd, 2020 at 09:39 #107589
    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

    September 27th, 2020 at 20:50 #107725
    Zed
    Cryout Creations mastermind

    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.
    September 28th, 2020 at 20:48 #107773
    cfarivar

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

    October 2nd, 2020 at 20:12 #107872
    Zed
    Cryout Creations mastermind

    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.
    October 4th, 2020 at 07:28 #107897
    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
Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Background image cut off’ is closed to new replies.