CODEWITHSUNDEEP
htmlcss
Caio Kawasaki
Caio Kawasaki

Reputation: 2950

Overflow hidden not working with fixed child

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

Upvotes: 2

Views: 695

Answers (2)

Maharkus
Maharkus

Reputation: 2898

http://jsfiddle.net/7q8v1vsu/

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

Upvotes: 1

Jonas Grumann
Jonas Grumann

Reputation: 10786

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;
}

Upvotes: 1

Related Questions