Tania Rascia

Skip Navigation
Background Position Fixed and Cover with CSS

Background Position Fixed and Cover with CSS

 /  9 responses

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.

Note

Hi, my name is Tania Rascia. I've turned down every offer for advertisements or sponsored posts on this website. I write free resources that have helped thousands of people successfully transition into a web development career.

My committment is to no bullshit, no sponsored posts, no ads, and no paywalls. If you enjoy my content, please consider supporting what I do.

Support my work

Newsletter

New articles on web development every two weeks.

Write a response

Your email address will not be published.

All code will be displayed literally.

Discussion

  • Shane says:

    Hi Tania!

    Great article ­čÖé

    I'm trying to achieve this while having a div that is always 16:9 ratio, so I'm not trying to hard code a height… So how would I go about getting the image to scale when shrinking the window then?

    code looks like this:

    #viewport {
    width: 100%;
    margin: 0%;
    padding: 56.25% 15px 15px 15px;

    background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSDuN7f1YONvVzPSSmTp7nNBQGQglSjR6L4Hz37EC8yZIMk_HVhVQ&#039;);

    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    background-position: center center;

    background-attachment: fixed;

    display: flex;
    justify-content: center;
    align-items: flex-end;

    z-index: 1;
    position: relative;
    overflow: hidden;
    }

  • Nino ┼ákopac says:

    This definitely doesn't work (anymore).

  • Azragh says:

    Any idea to fix the jumpy behaviour in IE11? Searched for about two hours now and I'm damn curious about that.. When I scroll with the mousewheel, the background-image jumps around like hell. If I grab the scrollbar and draw it, everything works as expected..

  • Daniel says:

    This doesn’t help much if you want to have the background image cropped to the first containing element. In your case, the background image is relative to the viewport, rather than it’s containing element. In other words, the “cover” background-size cover attribute is utterly irrelevant.

  • Christian H├Ąnsel says:

    Hi Tania

    Thank you so much for this short but great article. Will come back to read more!

    Cheers from germany

    Chris

  • Kageetai says:

    Hi there,
    I just stumbled upon the same problem that fixed and cover don’t seem to play well together and checked out your demo, but unfortunately it doesn’t seem to work (anymore) either. It is most apparently when you set the height of the DIVs to something smaller, like 30vh.

    • Hasans says:

      Thanks, Tania, used that. Kageetai, You may want to put in some css calculation to avoid very narrow slit with small screen and too high an opening for PC. At least, it was aesthetically most pleasing for me, height:calc(36vh + 40px);.

  • Philip Harper says:

    ???? LIKE!!