Сложные фоновые текстуры с CSS

Question

У меня немного сложная проблема с фоном CSS.Проверьте мою попытку здесь: http://beveragebros.com/bbnew/scroll.html

Фон, о котором я говорю, это "пергамент", где находится копия.Этот пергамент не простая текстура, с которой я привык иметь дело.Обычно я бы идентифицировал «верхнюю» и «нижнюю» часть, а затем повторный образец для середины.Это позволило бы мне сделать саморасширяющийся div в зависимости от размера содержимого.Этот случай не так прост, потому что верхние 75% шаблона не повторяются.

Я знаю, что есть лучший способ сделать это, но я часами ломал голову и, похоже, не могуприйти к хорошему решению.Есть какие-нибудь мысли?

Недавно возился с этим:

#body-text {
  background-image:url(images/repeat_scroll.png);
  background-repeat:repeat-y;
  width:730px;
}

#copy {
  position:relative;
  top:-200px;
}

Разметка:

<div id="body-text">
<img src="images/top_scroll.png" alt="Top" />
<div id="copy">
   Testing Testing Testing Testing Testing
</div></div>

Однако проблема в том, что div-текст тела автоматически расширяетсянесмотря на то, что текст не достиг дна содержащего div.Это было бы НАСТОЛЬКО просто, если бы CSS допускал несколько фонов с различными z-индексами.# Rippingmyhairout

Answer 1

Вместо того, чтобы установить текстуру в качестве фона содержимого, как насчет установки его в качестве фона контейнера div и оставить top_scroll.png как часть самого основного текста?

IE

#container {
     background:url(images/repeat_scroll.png) center top repeat-y;
}
#body-text {
    background:url(images/images/top_scroll.png) center top no-repeat;
}

А затем поместите все внутри контейнера ...

<div id="container">
    <div id="body-text">
        Testing Testing Testing Testing Testing
    </div>
    <div id="bottom-scroll">
        <img id="margarita" src="images/margarita.png" alt="Margarita" />
        <img id="fruit" src="images/fruit.png" alt="Fruit" />
    </div>
</div>

Теперь фоновое изображение элемента # body-text будет скрывать верхнюю часть repeat_scroll.png как часть контейнера.делая его похожим на top_scroll.png, плавно сливается в repeat_scroll.png.

Вы можете добавить дополнительный отступ в верхнюю часть # body-text, чтобы немного сдвинуть текст вниз, чтобы освободить место для самого изображения.

Answer 2

для вашего изображения для положения делайте верхний центр.

background-position:top;

центр не нужен, потому что он автоматически центрируется, если 2-й пробел остается пустым