Topic: Full Background Image Resolution Very "Bitmap-ie" on Small Viewports
surface2air free asked 6 years ago
Hi Support,
I am working from a Full Background Image template for a web page, and in my online testing the image looks fine across viewport, device and screen size, but when I do real-world testing on my iPhone 7 (iOS 11), the background image I am using loses its resolution and becomes very "bitmap-ie" and overly pixelated. The image clarity is completely lost.
How can I correct this? My original image size for the background image is:
985 x 750 px (72 dpi)
Here's my page (test in production):
http://gridinteractive.com/gma-2018/georgetown-bites.htm
Here's how it looks in Quirktools on smaller viewports:
http://quirktools.com/screenfly/#u=http%3A//gridinteractive.com/gma-2018/georgetown-bites.htm%23more&w=320&h=568&a=37&s=1
But compare on an actual smartphone to see the difference.
Any help is greatly appreciated!
Thank you!
Eric
Seattle, Washington
Ollie Vincent pro answered 6 years ago
Hi,
It looks fine on my Android.
You could try this link (I have used it before): https://stackoverflow.com/questions/11602957/background-size-cover-looks-pixelated-on-retina-display
Alternatively have you tried using MDB's Parallax effect found here: https://mdbootstrap.com/css/bootstrap-parallax
It will also allow the Parallax effect to work on Mobiles :)
Hope that helps...
surface2air free commented 6 years ago
Hi Ollie, Thanks, yes, the issue has to do with the background property set to "fixed." When that's removed from the CSS, the image displays perfectly now across all viewports and device size. Great tip! Thanks, EricFREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags
surface2air free commented 6 years ago
Please close, issue has been resolved. Thanks! :]