Background Position Fixed and Cover with CSS

March 27th, 2017/Share/Edit ✏️

I wanted to make a section of a website have a div featuring a background image that had both background-attachment: fixed and background-size: cover, regardless of the image's size. This website is a working example of multiple fixed, full-screen background image divs.

Demo

div {
  width: 100%;
  height: 90vh;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

You can also write this code in the background shorthand:

div {
  background: url(file.jpg) no-repeat 50% fixed / cover;
}

Then you'd simply add the background image to the div and adjust the height property as necessary.

<div style="background-image: url(file.jpg);"></div>
<div style="background-image: url(file.jpg);"></div>
<div style="background-image: url(file.jpg);"></div>

I'm only loading the background image in the HTML in the case that you're pulling the image dynamically via PHP. Otherwise, you can create separate classes with background images in the CSS file.

fixed and cover didn't use to play well together, and you would have to put the height property in an outer container, but I tested this code on Chrome, Firefox, Safari, and Opera, and it works fine.