Как мне измерить второй div, чтобы он был 100% высоты под фиксированным изображением?

Question

Я использую полупрозрачные PNG (из-за перекрытия элементов дизайнером) и пытаюсь создать макет, который представляет дизайн, и в то же время хорошо работает в Интернете. Таким образом, у меня есть простой HTML:

<div id="right">
    <div id="welcome"></div>
    <div id="welcomeRepeatingBottom"></div>
</div>

И я пытаюсь использовать CSS следующим образом:

#right {
    height: 100%;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 430px;
}

#welcome {
    background-image: url("welcome.png");
    height: 614px;
    width: 430px;
    position: absolute;
    top: 0px;
    left: 0px;
}

#welcomeRepeatingBottom {
    background: url("welcomeBottom.png") repeat-y;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 614px;
    width: 430px;
}

Проблема в том, что div #welcomeRepeatingBottom не может перекрывать div #welcome из-за прозрачности. Что я действительно хочу, так это то, что div #welcomeRepeatingBottom имеет значение height: 100% - 614px, , но, конечно, вы не можете этого сделать. Я что-то здесь упускаю или мне нужно манипулировать этими значениями с помощью JavaScript / JQuery?

Answer 1

Возможно, вы могли бы сделать это с комбинированным фоновым изображением, которое включает в себя основное изображение 614 пикселей плюс нижнее изображение, повторенное несколько раз, чтобы приспособиться к любой разумной высоте браузера (поэтому ваше общее изображение может быть 1200 пикселей или больше). Затем используйте это большое изображение в качестве фона в одном изображении div