Question

I load a background image through jquery into a DiV, and occasionally a modal pops up which stretches the screen height so that you have to scroll.

I wanted to have my bg image scroll with the view, but the issue is that height:100% apparently means 100% of the original height. The div doesn’t stretch with the rest of the screen.

Why is that? Here is my code:

#bgDiv {
    display: none;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
        background-attachment:fixed;
    top:0;
    right:0;
    position: absolute;
    z-index: -9999;
}

Thanks!

Answer 1

If you set your position to fixed instead of absolute, it should stay, even when there is scrolling.