1

I would like to have a background image on a website. This seems like a pretty reasonable request.

I want the background image to be in a fixed position, so that the content scrolls over the top of it. On a classic desktop browser, you can use something like background-attachment: fixed, but this has no affect on my small touch screens. Instead the image scrolls along with you.

It would be great if I could have a position: fixed div with the background image - could accomplish this... but then there is another issue where the 'chrome' or the UI for these touch/small-screen browsers / changes the size of the view-port to accommodate it's buttons - and then again when you scroll down + the buttons go away and the viewport is now taller. (this is not a new problem, but it seems like a problem everyone is OK with.) I am wondering if I'm missing some other option / . I've been trying to find a way around this for years.

<div class='background'></div>

.background
  background-image: url('some-image.jpg')
  position: fixed
  top: 0
  right: 0
  bottom: 0
  left: 0

http://codepen.io/sheriffderek/pen/pbQpwp

Debug view for phone: http://s.codepen.io/sheriffderek/debug/pbQpwp

sheriffderek
  • 8,848
  • 6
  • 43
  • 70
  • That has the same problem unfortunately. : / the OS changes the height of the view-port / so it fundamentally changed the context of our sites. – sheriffderek Aug 08 '16 at 21:30
  • As far as I know `background-attachment` is disabled on mobile browsers for performance reasons. Does [this question](http://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios) help? – vkopio Aug 08 '16 at 21:35
  • @Remco van Os : A JS height alteration based on windowHeight will have the same effect. The image will 'adjust' but it will be jarring. – sheriffderek Aug 08 '16 at 21:35
  • Thanks @V-Kopio - but those are all just the same dead-ends. This isn't specific to iOS either. : / sites like this: (look on phone) http://wherewedream.org/ just don't cut it. Sure... it's a background image... but it shifts... every-time you scroll in a new direction... – sheriffderek Aug 08 '16 at 21:43

0 Answers0