Повторите второе фоновое изображение под первым изображением

Question

Я пытаюсь использовать 2 экземпляра background-image в одном <div> слое.Первый background-image (который частично прозрачный) должен отображаться в top из <div>, второй должен отображаться непосредственно под первым background-image (это работает).

Из-за динамическойСодержание второго изображения с высотой 1px следует повторить по вертикали (repeat-y) и начать повторять под первым background-image.Моя проблема в том, что когда я пытаюсь повторить второй background-image, он повторяется по всему слою <div>.

.mainFrameRoundBorder {
    border: none; 
    background: url(../images/theme_box_main_l.png), url(../images/theme_box_main_2.png);
    background-repeat: no-repeat, repeat-y;
    border-radius: 0 0 0 0;
    box-shadow:0 0 0 0;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-position: center top, 0px 364px;
    margin-top:10px;
    padding: 6px 15px;
    overflow: hidden;
    color: #FFFFFF;
}

Answer 1

Я бы предложил использовать псевдоселекторы: before или: after.Вы можете поместить свой повторяющийся фон в элемент div, как обычно, а затем поместить неповторяющийся фон в элемент псевдоселектора.

Этот урок должен дать вам несколько полезных советов по этому методу:

http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

Answer 2

Я бы предложил вам использовать z-index