Blurred mobile background - lovelace custom background

I am having issues where the background I have set for Lovelace appears blurred/not rendered properly on mobile devices, yet looks perfect on desktop view.

It sometimes partially renders correctly as per the attached screenshots, however, is normally blurred like the lower half of these pictures.

My configuration is set per the HA docs. any ideas on how to solve this? Is there a way to set a view specifically for mobile devices? Thank in advance.

CCH can expose views based on browser agent.

Cheers for that info.

My main concern is the blurring/rendering of the background image on mobile, and how to rectify that.

Hey @kanga_who
I had similar issues this week, only way I found to fix was to use a ‘seamless’ background image and allow it to tile as needed.

1 Like

I had the exact same problem with the exact same background :stuck_out_tongue:.
Changed from image background to pure CSS that was very stylish. Try this in your ui-lovelace.yaml

background: >-
  radial-gradient(#286a84, #212527)

Any chance of a screenshot?

Sure :-). Took one screenshot scrolled a bit and took another one. Can send a desktop screenshot later today.

1 Like