Fixed scroll bg image

by Jesse M

HTML

<div class="first"></div>
<p>The first point to note is that all of my background images have a width of 1600px and height of 600px. That allows me to set my parallax sections to a fixed height of 600px. There's a bit more than that to it though. Because I don't want repeating backgrounds (I'm using big and bold images), I can't always expect users to be at maximum width (which will allow the background images to be in full view). Luckily for us, we can utilise the CSS background-size property, and set it to cover. This forces the background image to occupy the total available space by expanding it proportionally. It needs to be prefixed for maximum support though, so be mindful of that.</p>

<p>So far so good, except for the most important thing. We need our background image to remain fixed in place while our content scrolls past it. Again, CSS makes life easy for us. We utilise the background-attachment property and set it to fixed. Simple! Here's what my CSS looks like, with some example media queries.</p>
<div class="second"></div>

CSS

div {
  height: 600px;
  background-size: cover;
}

div.first { background:url('http://bestdoor.ndmr.com/wp-content/themes/bestdoor/images/footer-doors.jpg') 50% 50% no-repeat fixed; }

div.second { background:url('http://bestdoor.ndmr.com/wp-content/themes/bestdoor/images/slide-01.jpg') 50% 50% no-repeat fixed; }