容器背景重复-不起作用

Question

Have the following html code:

<div id="container">
    <div id="container2">
            ...
    </div>
</div>

and the following css:

#container {
background: #323232 url(../images/container-bg.png) repeat-y;
position: relative;
min-height: 75%;
}

#container2 {
background: url(../images/container-bg-right.png) repeat-y right top;
}

but the image in #container2 is not repeating itself vertically after I added 'min-height: 75%' to #container.

Any advise is appreciated!

Answer 1

So I figured it out, here is what I did:

#container {
    background: #323232 url(../images/container-bg.png) repeat-y;
    position: relative;
    height: 75%;
}

#container2 {
    background: url(../images/container-bg-right.png) repeat-y right top;
    min-height: 100%;
}

Thanks!

Answer 2

I believe that your container2 background is not repeating because it has no height. So if you want it to repeat as much as container one just give it the same min-height as container1.