Tania Rascia

Skip Navigation
Background Position Fixed and Cover with CSS

Background Position Fixed and Cover with CSS

 /  11 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.


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.


Get updated when I create new content.
Unsubscribe whenever. Never any spam.


I'm Tania. I turn down every ad, affiliate, and sponsor request I get. I write free resources that help thousands of people successfully become devs. If you enjoy my content, please consider supporting what I do.

Support my work

Write a response

Your email address will not be published. Required fields are marked *

All code will be displayed literally.


  • Jack says:

    OMg thank you

  • Mahdi says:

    Thanks 🙂

  • 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


  • 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!!