Blurred Background Image On Mobile
Christian Haselsberger
Dear team, I have a problem on one of my websites. Unfortunately, the background image of the page is blurred on the mobile view. No matter which image I use. It is sharp on the desktop, but not on mobile... what could be the reason? Many thanks for your help! Christian www.edelweiss-soell.at
Paul Frankowski
Accepted AnswerIf you (or site owner) has Desktop Screen resolution bigger than 1920px I suggest using also that Custom CSS:
@media screen and (min-width: 1919px) {
body.site {background-size: cover; }
}
Mehtaz Afsana Borsha
Accepted AnswerHi
Thanks for contacting us. Could you please give me a screenshot of it?
-Regards.
Christian Haselsberger
Accepted AnswerHi! of course. https://snipboard.io/NdQ719.jpg
Thank you!
Paul Frankowski
Accepted AnswerHi Christian ,
It's problem with Safari (iPhone) and CSS --- long story - since iPhone 1, also WP & Drupal webmasters has that same problem ;p
In general - Iphone browsers (all) do not like when those two settings are used together
Set Background Attachment "Scroll" not "Fixed" as is probably now, Save, and should be better.
Paul Frankowski
Accepted AnswerNow when I know that you used that BG image for whole site, it's much easier to fix it:
- Set background-attachment: fixed (again, as it was)
- Set background-size: auto or inherit or remove value that you set there (empty).
- Use also that Custom CSS (it's for Google & Accessibility Tester):
body.site {background-color: black;}