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

29 Sep, 2007

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

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

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

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

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

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

Вообще классическое центрирование обычно выглядит так: HTML:
  1. <body>
  2. <div id="out">
  3. ...сайт...
  4. </div>
  5. </body>
CSS:
  1. body{text-align:center}
  2. #out{
  3. width:700px;
  4. margin: 0 auto;
  5. }
Почему-то все еще часто можно услышать вопросы о центрировании или применении тага CENTER, потому не лишне наверно было упомянуть эту реализацию =)

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

Для реализации придется добавить пустой див(это стыдно и неправильно, да):
  1. <body>
  2. <div class="stupid-right"></div>
  3. <div id="out">
  4. ...сайт...
  5. ...
и соответствующий этому диву CSS:
  1. .stupid-right{
  2. position:absolute
  3. top:0;
  4. right:0;/*правый верхний угол */
  5. width:50%;/*половина экрана */
  6. height:200px;
  7. background:green;
  8. }
Таким образом див берется шириной в половину экрана, и позиционируется в правый верхинй угол, а значит никогда не будет вылазить слева от сайта, ни при каких разрешениях. Добавив такой же блок слева, получим вот что-то вроде этого (дивы перекроют по половине сайта справа и слева):

Добавим:

  1. #out{
  2. position:relative;
  3. }
Таким образом мы поменяли их местами "в третьем" измерении, и все выглядит как надо.

В конце

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

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.Несимметричный фон на центрированном сайте &laquo; Articles about Web Development | 18 Jul, 2008
[...] Читаем [...]