Nikola Ivanović Nikola Ivanović - 1 month ago 14
CSS Question

How can I add fixed background just to this section? [demo included]

I'm trying to add a fixed background to ONLY this section of my web-page.
When someone scroll down to another section, I'll add background color, not image.

I dont know how to explain this, so I made a demo on my website:
demo
image explanation



I already tried this:

.cd-fixed-bg {
min-height: 100%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
.cd-fixed-bg.cd-bg-1 {
background-image: url(" IMAGE URL IS HERE ");
}


My html code (without this css above this):


That didn't work execly on way I wanted, so I uploaded demo with that too:
demo

PS. Ignore russian phone images, I was just testing something.

I tried some other css tricks but nothing worked correctly.

Thanks.




Since the question is answered correctly, demo was removed. Thanks!

Answer

Here it's work fine: http://csgotale.com/stackoverflow-demo/index-with-my-try.html

but, add to your html,body and h1 margin: 0; padding: 0;

If you wanna make Parallax Effect, i do it here: http://codepen.io/powro01/details/pEBBgR/