VPF::два фоновых изображения в одной строке

kulikoff

Дата 1.7.2014, 20:15 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 334
Регистрация: 5.11.2005
Где: Киев

Репутация: нет
Всего: 1

такая ситуация: мне необходимо в одной строке (хиадер сайта) разместить два фоновых изображения. Они будут повторяться в разные стороны. Т.е., у меня от центра экрана и влево идет один бэкграунд (рисунок повторяется по горизонтали) и вправо, от центра и вправо идет другой бэкгрануд. Ну и по центру должен быть какой-то див с фиксированной шириной (1200 пикселей). Всю башку сломал, не могу понять, как это сверстать. Буду признателен за помощь

Aliance

Дата 2.7.2014, 09:24 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137

Используйте multiple-background:

Код


.element {
    background: background1, background2, ..., backgroundN
}

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

AVA12

Дата 2.7.2014, 19:28 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 135
Регистрация: 4.5.2008

Репутация: 1
Всего: 4

Aliance, во-первых, такая возможность появилась только в CSS3 и не поддерживается в IE версии ниже 9. Во-вторых, работает это решение не так, как нужно (если я все правильно понял).

Проблему можно решить с помощью двух блоков, для левой и правой половины фона. Примерно так:

Код

.frame, .frame div { padding: 0px; height: 20px; }
.frame { position: relative; width: 100%; }
.left, .right { width: 50%; position: absolute; }
.left { left: 0px; top: 0px; background: url(left.png) 100% 0% repeat-x; }
.right { right: 0px; top: 0px; background: url(right.png) 0% 0% repeat-x; }
.frame div.center { width: 1200px; margin: 0px auto; position: relative; }

Код

<div class="frame">
<div class="left"></div>
<div class="right"></div>
<div class="center">Заголовок</div>
</div>

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »