Несимметричный фон на центрированном сайте

29 Sep, 2007

Относительно часто встречаются макеты центрированные по горизонтали, но с уходящими влево и вправо разнымы фоновыми картинками, примерно так.

Делюсь своим способом решения этой задачи.

Конечный результат

Добиваться будем примерно следующего.

Кто понимает код - можно дальше и не читать =)

Центрирование

Вообще классическое центрирование обычно выглядит так: HTML:

<body>
<div id="out">
...сайт...
</div>
</body>

CSS:

body{text-align:center}
#out{
width:700px;
margin: 0 auto;
}

Почему-то все еще часто можно услышать вопросы о центрировании или применении тага CENTER, потому не лишне наверно было упомянуть эту реализацию =)

несимметричный фон

Для реализации придется добавить пустой див(это стыдно и неправильно, да):

<body>
<div class="stupid-right"></div>
<div id="out">
...сайт...
...

и соответствующий этому диву CSS:

.stupid-right{
position:absolute
top:0;
right:0;/*правый верхний угол */
width:50%;/*половина экрана */
height:200px;
background:green;
}

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

Добавим:

#out{
position:relative;
}

Таким образом мы поменяли их местами "в третьем" измерении, и все выглядит как надо.

В конце

Паттерн до боли простой, если кто-то решал подобную задачу по другому, был бы рад опыту.

Пример с разными фонами с обеих сторон

27 комментариев к “Несимметричный фон на центрированном сайте”

1.pepeplsbey | 30 Sep, 2007: Если картинка довольно простая, то можно просто создать её из требуетмых половинок очень (ну очень) большой в ширину, сохранить в PNG-8 и положить со смещением 50% на BODY. Пару раз так делал, вполне себе удобно.
2.Mourner | 30 Sep, 2007: Блин, не додумался в своё время, спасибо за совет! Делал всегда как указал pepelsbey, но в этом решении нельзя поспользоваться преимуществом repeat-x, а картинка большая всё-таки больше весит одного пикселя.
3.akella | 30 Sep, 2007: Да - полностью согласен насчет большой(широкой) картинки. Хотя пересев за 20" Аймак я слегка разочаровался в этой идее на некоторых сайтах :) Большое разрешение балует...
4.Сергей | 30 Sep, 2007: Спасибо. Хороший совет. Как и все остальные :)
5.Local | 01 Oct, 2007: Полезная статья, пригодится, спасибо.
6.akira | 01 Oct, 2007: Мне кажется или ссылка одинаковые? :-)
7.akella | 01 Oct, 2007: в index1.html у меня серые блоки поверх текста... а в каком броузере обе ссылки одинаково выглядят?
8.Ivan | 02 Oct, 2007: Akella, это все хорошо. Но мне интересно, как бы ты реализовал точно такую же ситуацию, но с учетом того, что фон разный и справа и слева должен тянуться на 100% по высоте. Вечером отпишу свое решение, сейчас под рукой нету исходников.
9.akella | 02 Oct, 2007: Первое что приходит в голову body{padding-left:20%} #out{padding-right:20%} Ну и соответственно фоны задавать для БОДИ и #out. Их протяженность по вертикали уже можно контролировать
10.Cooluck | 03 Oct, 2007: «Глюк?» на Яндекс.Фотках И ссылки у меня тоже одинаковые, кликал из Feedreader
11.akella | 04 Oct, 2007: Хм - а в моих виндошных все ок... что у тебя за броузер?
12.Cooluck | 04 Oct, 2007: ИЕ 6, стандартная сборка.
13.akella | 05 Oct, 2007: Странно - на моей чистой WinXP - все ок в ИЕ6 (
14.Tween | 05 Oct, 2007: В общем-то то же самое можно и таблицами сверстать. Или CSS-Таблицами ,если уж все так любят DIV:)
15.akella | 05 Oct, 2007: На этом блоге нет обсуждений как верстать - таблицами или нет =). И я никого не буду уговаривать...
16.Tween | 05 Oct, 2007: В смысле имелось ввиду ,решить проблему наверняка можно ещё проще=)
17.akella | 05 Oct, 2007: При всем уважении - вряд ли. Решение при помощи кучи лишнего кода для меня не более простое решение. Даже добавление пустого дива ) нож по сердцу. Я уж молчу о таблице с тремя ячейками, в которой я запутаюсь очень быстро =)
18.Cooluck | 06 Oct, 2007: Проявляется данный глюк на самом крупном размере шрифта, как оказалось. По-моему из-за слова Несимметричный его "распирает"
19.karasik | 26 Oct, 2007: Ivan сказал(а) 2 октября: Akella, это все хорошо. Но мне интересно, как бы ты реализовал точно такую же ситуацию, но с учетом того, что фон разный и справа и слева должен тянуться на 100% по высоте. Вечером отпишу свое решение, сейчас под рукой нету исходников. Так как же все-таки это сделать? Очень нужно .. пока что не нашел решения За инфу - большое СПС
20.akella | 26 Oct, 2007: Так в 9м каменте я вроде бы постарался описать свое решение. Иван?
21.karasik | 29 Oct, 2007: 2akella: что касается "9" - все ясно. Надеялся на решение которое позволит использовать левый и правый дивы в качестве "ушек", т.к. бэкграунд на боди уже занят )) и еще вопросик(сорри за оффтоп): можно ли сделать так чтобы заканчивался не под , а возле его края ... при условии что ширина фиксированная?
22.akella | 29 Oct, 2007: Напиши мне на имейл внизу страницы, а то я не очень понимаю что ты хочешь сделать...
23.karasik | 06 Nov, 2007: 2akella Спасибо, проблема была решена другими методами.
24.Del'ka | 15 May, 2008: в IE не работает(
25.Del'ka | 15 May, 2008: ага, увидел в самом низу пример где для IE используется filter - красиво! взял на вооружение)
26.aga | 11 Mar, 2009: Засунули весь сайт в один див и радуются, обсуждают как круто получилось! Я бы за такое как минимум пропесочил верстальщика, как максимум выгнал с работы.
27.Несимметричный фон на центрированном сайте « Articles about Web Development | 18 Jul, 2008: [...] Читаем [...]

Next: Перенос конференции UA Web
Previous: Семинар Ратмира Тимашева