Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Как сделать вместо бордера спец. background


Автор: linuxoid 23.12.2010, 19:03
Здравствуйте, уважаемые коллеги! Помогите мне плиз разобраться и понять как сделать специфический бэкграунд для бокса, в котором находится контент. Проблема такая: есть бокс с контентом, в котором идет список (он может быть любого размера). Так вот сверху идет как бы начало бэка (1 рисунок в высоту допустим пикселей 100), затем идет главный сплошной фон, который растягивается по мере добавления контента, в конце идет концовка (другой уже рисунок). Но с точки зрения пользователя разумеется это 1 рисунок, который растягивается на столько, на сколько это нужно, в соответствии с размерами бокса. Рисунок в приложении. Буду благодарен за подсказаньки.

P.S. проблема еще и в том, что мне нужно использовать прозрачные гифы или пнг, т.к. фон на сайте - разного цвета.

Автор: Amphiluke 23.12.2010, 19:43
Например, так:
Код

.wrapper-solid {
    background:#0cf;
}
.top-part-bg {
    background:url(http://s1.ipicture.ru/uploads/20101223/5cT8IZLF.png) 0 0 repeat-x;
}
.content {
    background:url(http://s1.ipicture.ru/uploads/20101223/Wo5OUtIp.png) 0 100% repeat-x;
}


Код

<div class="wrapper-solid">
    <div class="top-part-bg">
        <div class="content">
            <ul>
                <li>q</li>
                <li>q</li>
                <li>w</li>
                <li>w</li>
                <li>e</li>
                <li>e</li>
                <li>r</li>
                <li>r</li>
                <li>t</li>
                <li>t</li>
            </ul>
        </div>
    </div>
</div>

Автор: linuxoid 23.12.2010, 22:41
Спасибо за ответ! Проблема в том, что мне нужно, чтобы был еще и 3-й бэк, а не просто фон по середине. 

Я добавил пример в приложение, где вложены все 3 бэка + не порезанный (на 3 части) фон. Когда я пытаюсь что-то сделать с ними, они перекрывают друг друга.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)