Android background-attachment: fixed and background-size

March 26th, 2014 by Alex Leave a reply »

This seems to be a bug/feature for quite a long time and seems to be present in Android 4.0 at least, so when someone uses

.element {
  background: url('bg.jpg') no-repeat center top;
  background-attachment: fixed;
  background-size: 960px;

This doesn’t work on Android (as of the time written). Yes, it doesn’t respect background-size when you use that, so you might need to make a wrapper element with height: 100%; overflow: hidden and scroll the inner element only (that way it looks like a fixed position background). So the general structure should/might be:

<div class="background">
  <div class="element">
   scrollable content is here, we scroll the .element and leave the .background unscrollable

Comments are closed.