[Resolved] Background issue on tablet

[Rylan Urban]

Thanks Dave – we’re pretty close! It bounces around a bit on mobile/tablet – but based on our thread, it sounds like I’m going to have to live with that.

But on desktop – there’s a small issue that would be great to fix. The bottom of the image is cut-off depending on browser and page. Is there a way to get the image to default to cutting off the top when needed, and always align the bottom at the bottom? Screen shot here (chrome) and here (edge). Thanks!

Rylan

[Rylan Urban]

If you open on desktop and make the browser window smaller – then slowly drag it bigger. There is a point where the image stops being exactly at the bottom and starts zooming in on the top left corner as the window gets bigger and bigger.

[Rylan Urban]

I think I got it with background-position: 50% 100%;

The jumpiness is there on mobile when you scroll up and down (looks like it’s re-aligning). Can you confirm that’s unavoidable?

Thanks a lot,

Rylan

[David]

Looks good to me 🙂
The issue with any fixed element is they are really CPU intensive, as each and every scroll movement requires the fixed element to be redrawn, so not much to be done about that.

[Rylan Urban]

Makes sense – but I will note that on Google Pixel – it was never jumpy using the customizer method to place the background image. Thanks David!

[David]

You’re welcome – chances are the Google Pixel may have come up with a different solution to the fixed background issue – ill have a look into that – thanks for sharing that.

[Author]

Posts