Streaming live at 10am (PST)

Issue with fixed background image on iPad/iOS


#1

Hello. Could you please check reto.webflow.io on ipad landscape? The background of the website shows very zoomed in and very blurry when you check the websites on ipad landscape. I have checked it on my pc (1280x800 pixels) and on my android device in both landscape and portrait and the background looks good. It even looks good on ipad portrait, but in ipad landscape it looks bad. Could someone help me check it and find a fix for this?

Thank you!


Fixed background picture doesn't work on iphone5 safari
More understanding to fixing issue of fixed image background on iPad/iOS
#2

Awesome work on the site so far. The background image is only 1300px wide... do you have a 1920 version you could use? Devices with larger retina screens such as the ipad in landscape will make the image look slightly blurrier due to its lower resolution.

You can also share your site share link so we can take a read only look inside the designer.


#3

Hi! Thanks for your response. I hadn't even thought about those devices with retina screens! I should consider that heh.... However I have an ipad 2. It still doesn't have retina screen. And yesterday I checked the website on a windows 8 machine with touch screen. I'm pretty sure that one doesnt' have HD screen or something like that and the backgroud also looks super close. Super zoomed in and therefore blurry and pixelated.

I don't have 1920 version of the picture. I would have to look for it, but... I do have a question about that. Large pictures like that often are big in file size. I use websites like tinypng.com to compress the picture and get the lowest size possible, but still some of them won't be less than 200k or 300k~. And putting in big resolution images like that will most likely also increase file size, therefore, affecting loading times on website. How can I find a middle point to work on? What would be the best practice here? Go for large images to work well on retina screens? Or go for lower size images that increase loading times on website??

Anyway, here is my shared link and maybe someone can help me out.

https://preview.webflow.com/preview/reto?preview=b34a28e312b7ebd2a4b8092f7826f16e

Thanks!!!!


#4

Hey there. The photo itself looks slightly blurry to me on my non retina macbook as is - so not 100% certain, if you could upload screenshots of what you see on those devices that may help. The images certainly shouldn't be "zoomed in" so that is odd behaviour. You also have two backgrounds added in the backgound image panel on the tablet viewport in the designer. Have you tried disabling one? Ipads in landscape usually just use the width of the desktop viewport though so they should look similar to that of your laptop.

While your devices such as your windows 8 touch screen may not be retina they will be HD and seeing as how the background is 1365px and set to cover it will stretch much larger than that - it will stretch to the page edges even if they are way larger than the background itself. You can set the background not to cover but just to be centred if you don't want it to stretch larger and get blurrier also.

In terms of image compression 200kb is the max size you want images to be and that is 100% fine for background images. I personally always go for around 100-200kb for my background images at 1920px size. Tinypic is great and photoshops save to web is even better.


#5

Hi!! Here are two screenshots on my ipad. One on portrait which you can see it's fine. The other on landscape looks very bad. I tried deleting the other layer you told me inside the image panel on the table view and it still shows like this.

Is there something else I could try??

Thanks!


#6

Hi @aerismel, I have created a 1920x1080 image from the source image you are using for the background. Could you run a test and replace the image you have now, with a test image, then save changes and republish and see how it looks?

Here is the new test image that is 1920x1080:

This image above is 236kb.

One more thing, create a new div, directly under the body. Give it 100% width and height, with a fixed position, with full cover and a z-index of -1. Remove the bg from the hero section all together.

When you set the image as the background of the div that will be the lowest layer in the page, use these style settings:

Let us know after you republish, so we can take another look smile Cheers, Dave


Why images look blurry on iPad but proper on computer screen
#7

Omg Dave!! That completely changed everything and now it looks great on ipad and all devices!! I will have to check on other resolutions and more devices just to make sure, but that little trick is awesome!!

Also, thank you for sending me the large image!! You rock!

Thank you both for helping me out! Dave and @jaidenleach!

=D

--
Mel


#8

Thanks @aerismel, this trick also should work well for sliders put in the background div, to be used as a slider background.

Normally fixed bg images in sliders may sometimes cause quirky issues, but by doing it this way, you can fix the background div to the page in the lowest layer, and not have to apply any fixed bg images to the sliders smile Just a thought for future designs smile

Don't be afraid to experiment smile

Cheers,
Dave


#9

Really glad Dave got you the 1920px version. Site is looking great on the iPad now, I just checked on mine as well smile


#10

I love it. thank you! I will definitely use that on other websites!! Thanks @jaidenleach also for checking the site on your ipad! =) You guys are so nice!

Mel


#11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.