background-repeat: repeat-y; starting position CSS

css

Solution

You can use `:before` selector to add a pseudo element and position and style it so as to have second background you mentioned. Assuming 518px is height of first background, here is sample CSS to place second background below first.

.box_area {
    width:925px;
    background: url(../../images/verloop.png);
    background-position: 0px 0px, 0px 284px;
    background-repeat: no-repeat;
    padding-left:25px;
    margin-left: 25px;
    padding-right:7px;
    float:left;
    position: relative;
}
.box_area:before {
    content: "";
    height: calc(100% - 518px);
    width: 100%;
    background: url(../../images/whiteback.png);
    background-repeat: repeat-y;
    display: block;
    position: absolute;
    top: 518px;
    z-index: -1;
    margin-left:-25px; /* This is to counter the 25px left-padding in .box-container div */
}

Problem

I am using 2 backgrounds in a single div. The top one has a static height and width and it doesnt repeat, but it has a transparency. The bottom one is a white line of 1px height that needs to repeat-y. But since repeat-y takes the whole height of the containing div. It is also behind the transparant top background image. Is it possible to make it so the bottom image only starts repeating under the top background and not at the top left? Oh and I am only allowed to touch the Css file, so adding divs is no option. ``` .box_area { width:925px; background: url(../../images/verloop.png), url(../../images/whiteback.png); background-position: 0px 0px, 0px 284px; background-repeat: no-repeat, repeat-y; padding-left:25px; margin-left: 25px; padding-right:7px; float:left; } ``` This is what I have now but the background position doesnt do anything at the moment. Can anyone help me?

Original source