Fixed background with top navbar and scrolling

Question

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

may you specify your environment because everything works fine for on my installed browsers (PC with firefox,ie,and opera)? — scraaappy, Feb 29 '16 at 11:20
@silviagreen, both backgrounds are fixed on the version of the code I shared. I just updated the page with the answer of Aziz, so now both images don't match anymore. — Camille Perrin, Feb 29 '16 at 12:35
@scraaappy, I'm on PC, Windows 7, Chrome, but I tried with Firefox and have the same problem: a white band appears on top of the background when you're scrolling (again, I've updated with the advices of Aziz so it doesn't look like that right now :)) — Camille Perrin, Feb 29 '16 at 12:37

Aziz · Accepted Answer · 2016-02-29T12:50:42.063

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 */ }

Hi Aziz, thanks for your answer. I was actually doing like that at first and ended up putting the background in `body` because otherwise, it stops where the block stops, and the length of the block depends on the length of my text (http://camilleperrin.fr/BBE/index.php?page=home). Edit: And `height:100%;` I think takes the size of the whole screen, so I end up with a 1080 px height and a scrollbar even if the text doesn't need one. — Camille Perrin, Feb 29 '16 at 12:39
I see. You could then just add `min-height: calc(100vh - 353px);` change 350px to match the height of your header. This is a bit hacky and might not have best support.... hmm, maybe just bring it back to body and wrap your header image inside a div that has white background to hide the top part — Aziz, Feb 29 '16 at 12:43

Fixed background with top navbar and scrolling

1 Answers1

Edit - Another approach