iPad & iPhone background image rendering issue

Question

I have built a website for a new client recently and on his iPad as well as his iPhone it renders the background image weirdly. Basically what its doing is taking a small portion of the actual image from the top right (I would say about 300px width and 250ph height) and just displaying that from 100% width and 100vh.

Naturally it looks quite bad and all pixelated. On my pc, my android phone and on the browserstack emulator it comes up as it should do showing the full image. From what I remember seeing it there is also some layout issues and it has a scrollbar on the bottom of his iPad.

The code I am using to render the image is as follows...

#fullHeightSection {
    width: 100%;
    height: 100vh;
    position: absolute !important;
    z-index: -1000 !important;
    background-image: url('/wp-content/themes/liveatlvlone/assets/barbg.jpg') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

Here is an image of what it should look like off my phone...

I also asked a friend who has an iPhone to take a screenshot and this is what he sent to me just...

Naturally it seems to be a software issue with all iPads and iPhones and I naturally have neither for testing. If you care to have a look for yourself the website is https://www.liveatlevelone.com/

Answer 1

I'd create multiple assets of /wp-content/themes/liveatlvlone/assets/barbg.jpg

For iOS you can use @2x @3x @4x etc, for retina scaling. If I remember correctly, https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/image-size-and-resolution/ is applicable to Safari Web Pages, I think.

You can also try a different format as well (like PNG), I think it'll work better than jpg (compression).

You could try adjusting the JPG Compression level, or perhaps opt for SVG format. SVG works better with solid colours, but it may work for the bar pic. I'm unsure.

Answer 2

There are a few rendering software programs out there, but not all of them are created equal. You need to use the best rendering software to create high-quality images. I can recommend you use forgehub.net . This software will allow you to create realistic images that look just like the real thing. With the best software, you can create photo-realistic images that will amaze your clients. You need to use the best rendering software to create the best images. This software will allow you to create realistic images that look