Overflow hidden not working with fixed child

Question

So, i'm trying to create a fixed background, actually its working. The problem is with my footer, because it is set back from the main and as the user goes scrolling it is displayed. The problem is when I put the fixed image, it is in the main with overflow: hidden, however the overflow: hidden does not work.

Here is a fiddle with my concept without the image: http://jsfiddle.net/7q8v1vsu/

And here with the fixed image: http://jsfiddle.net/L4oofkso/

And finally the code:

<div id="main">
    <div id="main-content"></div>
    <div id="main-background">
        <img src="http://clickalifecoachblog.com/wp-content/uploads/2015/01/Child-Girl-Bear-Toy-Autumn-Leaves-Nature-Photo-HD-Wallpaper.jpg">
    </div>
</div>

<div id="footer">
    <div id="footer-inner"></div>
</div>

Here is the CSS:

#main{
    position: relative;
    background: #749B35;
    margin-bottom: 70px;
    height: 800px;
    overflow: hidden;
    z-index: 10;
}


#main-background{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    z-index: 0;
}
#main-background > img{
    position: absolute;
    left: 0;
    top: 0;
    width: 1200;
    z-index: 0;
}


#footer{
    position: relative;
}
#footer-inner{
    position: fixed;
    background: #E76144;
    bottom: 0;
    width: 100%;
    height: 70px;
    z-index: 0;
}

Anyone know if this can be fixed with just CSS or I'll have to appeal to Javascript?

Thanks

@NaeemShaikh Yes, I want the background to be fixed, but I can not make it to interact with the overflow: hidden — Caio Kawasaki, Feb 03 '15 at 13:36
are you trying to display the footer on the bottom of the fixed background? — erickeno, Feb 03 '15 at 13:40
@ErycBrown When scroll occurs the #footer is fixed and #main has a margin-bottom: 70px and overflow:hidden. #main-background is fixed inside #main and the #main overflow:hidden is not hiding #main-background, this is the problem... — Caio Kawasaki, Feb 03 '15 at 13:43

score 1 · Answer 1 · answered Feb 03 '15 at 13:35

1

If it is a fixed background, why aren't you using a proper fixed background? http://jsfiddle.net/L4oofkso/1/

#main{
    position: relative;
    background: #749B35;
    margin-bottom: 70px;
    height: 800px;
    overflow: hidden;
    z-index: 10;
    background: url("http://clickalifecoachblog.com/wp-content/uploads/2015/01/Child-Girl-Bear-Toy-Autumn-Leaves-Nature-Photo-HD-Wallpaper.jpg") center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

answered Feb 03 '15 at 13:35

Jonas Grumann

10,438
2
22
40

Of course it works, you just need to expand that css: http://jsfiddle.net/L4oofkso/3/ – Jonas Grumann Feb 03 '15 at 13:44
@JonasGrumann the problem happens in mobile browsers, either in iOS and android... – Caio Kawasaki Feb 03 '15 at 13:46
If you want position fixed on all mobiles you're going to have a bad time: http://stackoverflow.com/questions/4889601/css-position-fixed-into-ipad-iphone – Jonas Grumann Feb 03 '15 at 13:52

score 1 · Answer 2 · answered Feb 03 '15 at 13:43

1

http://jsfiddle.net/7q8v1vsu/

Using background-attachment: fixed; will provide you with the desired results.

answered Feb 03 '15 at 13:43

Maharkus

2,841
21
35

Overflow hidden not working with fixed child

2 Answers2