My background is blurry on mobile devices. What can I do to solve this problem?

[Sebastian]

Hi!

I recently bought the premium version of GeneratePress and I also use the Elementor Page Builder. My problem is, that on my tablet and mobile phone the background (body) is blurry on 3 pages out of 7. I checked those pages on my computer with the customizer (tablet/mobile phone view) and it’s sharp, but not on my devices.

I made one of the pages with the elementor page builder and set 4 picture boxes right next to each other which made the background blurry on my tablet & mobile phone. When I reduced it to only one picture box it wasn’t blurry anymore on all devices but thats not how my page is supposed to look like. So thats not an option …

I tried this as well with my Blog-page and the customizer (no elementor involved) but that didn’t work at all. Another way which makes the background sharp is to set the background on “repeat” and “original size” but I don’t want the repeat function activated ….

It’s so frustrating and I have no idea what the problem is but may you do from what i described you.
I hope you can help! Thanks !

GP Premium 1.2.96

[Leo]

Hi there,

Any chance you can provide a link to your site? Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sebastian]

Of course!

http://thehangrylemon.de/

Thanks!

[Tom]

Is this happening on a specific page? I’m not noticing any issues yet.

A screenshot would help a lot as well 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Sebastian]

At the moment it happens with my mobile phone and tablet on
– http://thehangrylemon.de/blog/
– http://thehangrylemon.de/kochbuchvorstellungen/

It would also happen on http://thehangrylemon.de/kuechengeraete/ , if i add more of those picture boxes instead of only one. It works with one though …

Here is the screenshot:

Thats a screenshot from the blog (mobile phone). The background is really blurry ….
I hope you can see what i mean. If not, just let me know.

[Sebastian]

Sorry link didnt work:

https://img3.picload.org/image/rirdwagi/blurry.png

[Tom]

Setting the background image size to “Cover” will tell it to cover the entire body area. So if your page is really long, it will resize up proportionately until it covers the entire area. That’s where the blur is coming from.

You can fix this by setting it to “fixed” instead of cover.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Sebastian]

Okay I think it works now. Thanks a lot Tom!

It was already set on “fixed” but i changed another setting from “cover” to “Size(auto)”. So simple and stupid haha. Thanks again!

[Tom]

Ah, right! No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts