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  

surface2air free commented 6 years ago

Please close, issue has been resolved. Thanks! :]

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, Eric


Please insert min. 20 characters.

FREE 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