I'm creating a website for a fake company for my sister's birthday, and I'm having a little bit of trouble with the fixed background. I know it's supposed to be simple and just a matter of attachment:fixed, but it doesn't seem to work for some reason. Well the reason is obviously me, but I thought you could help me with this :)

Here is the website: http://camilleperrin.fr/BBE/, and the problem appears when you have to scroll (on this page if you have a 1920x1080 resolution: http://camilleperrin.fr/BBE/index.php?page=careers). In case you have a giant screen and you can't see the problem, the background image doesn't stay where it should be, and go down with the scroll.

Here is my code (I was helped by The Internet, I didn't come up with all of this myself):

CSS :

    body{
        background:url('background.jpg') no-repeat center 160px fixed;
    }

    #overallcontainer{
        padding: 70px 90px 120px 90px;
    }

    #blurcontainer {
        position: relative;
    }

    #blurbg{
        background:url('background.jpg') no-repeat center 160px fixed;
        text-align:center;
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        z-index: 99;  
        width:800px;
        margin:0 auto;
        padding:60px;

      -webkit-filter: blur(5px);
    }

    #textContainer  {
        position: relative;     
        z-index: 100;
        background: rgba(0,0,0,0.65);
        margin:0 auto;
        color:#dde;
        width:800px;
        padding:60px;
        text-align:justify;
    }

HTML :

<div id="overallcontainer">
    <div id="blurcontainer">
        <div id="blurbg"></div>
        <div id="textContainer">
            blah blah blah
        </div>
    </div>
</div>

If you have any idea of how I could fix this while keeping my blurred text container, it would be really helpful.

Thank you!

Camile

The problem is caused by the 160px top offset of background-position. I assume you did this to prevent background from interfering with your header. However, fixed position keeps the offset as it is sort of "stuck" in the viewport. I would recommend removing the background from body and applying it directly to your main content container #overallcontainer to fix this issue:

#overallcontainer {
    padding: 70px 90px 120px 90px;
    background: url('../design/careers.jpg') no-repeat top center fixed;
    background-size: cover; /* makes sure image covers entire viewport */
}

---

Edit - Another approach

As discussed in the comments, the previous method might not span the entire viewport because #overallcontainer has a dynamic height based on content and might be smaller than actual viewport height, thus creating blank whitespace.

This can be mitigated by bringing back the background to body and then creating a special header element that hides body background by adding a solid white background to header.

Change

<img src="design/header.jpg">

To

<header><img src="design/header.jpg"></header>

CSS

body { 
   ...
    background: url('../design/company.jpg') no-repeat top center fixed;
    background-size: cover;
}

header {background:#FFF;}

#overallcontainer { /* no need for any styles to this div any more */ }