Заставить содержимое div «кровоточить» внизу (или предотвратить отображение фонового изображения)

Question

Окей, так что в основном у меня есть:

<div id="content">
  ... content of arbitrary size ...
</div>
<div id="content_bottom"></div>

Стиль:

#content {
    background: transparent url(content_tile.png) center top repeat-y;
    width: 800px;
}
#content_bottom {
    background: transparent url(content_bottom.png) center top no-repeat;
    height: 200px;
    width: 800px;
}

content_tile.png - это изображение 800x1 (мозаика по вертикали) с прозрачностью. content_bottom.png - это 800x200 изображение.

По сути, мне нужно изображение content_bottom.png, чтобы заменить фоновое изображение #content только снизу. Наличие отрицательного поля для #content почти работает, но поскольку оба изображения являются прозрачными, они перекрываются, и этого не должно быть.

Я думаю, мне нужно сделать #content, чтобы не отображать фон на последних 200 пикселях внизу. Есть идеи, как мне это сделать?

Answer 1

Если вы немного изменили свою разметку и использовали javascript, вы можете сделать это с помощью абсолютно позиционированного элемента div, содержащего только фон. Затем при загрузке установите для высоты # repeating-background значение (высота содержимого # - 200 пикселей):

HTML

<div id="content">
    <div id="text">
         This is where your content would go
    </div>      
    <div id="repeating-background"></div>
</div>

CSS

#content {
   position: relative;
   width: 800px;
   background: url(content_bottom.png) left bottom no-repeat;
}

#text {
   position: relative;
   z-index: 2;
}

#repeating-background {
   position: absolute;
   z-index: 1;       
   top: 0;
   left: 0;       

   width: 800px;
   height: 1px;

   background: url(content_tile.png) left top repeat-y;
}

Javascript (jQuery)

$(document).ready(function() {
    $('#repeating-background').height($('#content').height() - 200);
});

Answer 2

создайте третий div, вложенный в #content, высотой 200 пикселей.