Правильное выравнивание больших бекграундов

Great Rash · November 2, 2010

Недавно столкнулся с одной очень интересной (и не очевидной) проблемой. Мне по работе надо было сверстать сайт где дизайнером был предусмотрен огромный (шириной 2000px) бекграунд. Идея дизайнера такова - мы кладем этот бек на <body> и выравниваем по середине (background-position: 50% 0;), при ресайзе окна бекграунд будет все время оставаться на месте (по центру).

"Ничего сложного", подумал я и наткнулся на неожиданное поведение "нормальных" браузеров. Минимальная ширина сайта была 950px и пока окно не становилось меньше все было отлично. Но, как только я делал окно меньше 950 пикселей бекграунд начинал смещаться относительно моего wrapper'а (и правильно делал, ведь 50% от 500px не то же самое, что 50% от 950px). Чтобы проиллюстрировать проблему я замутил вот такую страничку (смотреть в ИЕ8, Хроме, Сафари, Мозилле или Опере), осторожно огромная картинка, пара-тройка мегабайт траффика:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html,
		body {
			height: 100%;
		}

		html {
			font-size: 100.1%;
		}

		body {
			font: 62.5%/1.5em Arial, Tahoma, Verdana, sans-serif;
			color: #000;
			background: #fff url('http://www.futurama-madhouse.net/misc/FuturamaCast.png') 50% 0 no-repeat;
		}

		div {
			width: 950px;
			height: 100%;
			margin: 0 auto;
			border: red 1px solid;
		}

		div div {
			width: 100px;
			height: 100px;
			margin: 0 auto;
			background: red;
		}
	</style>
</head>

<body>

	<div>
		<div>

		</div>
	</div>

</body>
</html>

Попробуйте уменьшить окно браузера и вы увидите, что как только ширина становится меньше ширины красного бокса бекграунд начинает смещаться относительно центра дива.

Нам же нужно, чтобы бекграунд все время находился в центре красного дива (допустим на бекграунде у нас по центру солнце, а в хедере по центру логотип, и они должны всегда совпадать).

Долго гуглил по всякому формулируя вопросы и на одном блоге нашел направление в котором надо копать. Пришлось его немного усовершенствовать... В общем решение оказалось очень простое, абсолютно без хаков, но совершенно неочевидное. Поэтому решил с вами поделиться. Надо всего-лишь добавить 2 строчки в наш CSS:

html {

display: table;

width: 100%;

font-size: 100.1%;

}

Работает оно везде (к слову в ИЕ6 работает изначально как задумывалось). Надеюсь кого-то это спасет от пары часов гугления и траты нервов. Вот такое необычное свойство у таблиц имеется...

SelenIT · November 2, 2010

Я обычно решал эту проблему одним html { background: #fff; }. Дело в том, что по спеке, если фон указан только для body, он автоматом переносится на html. А если указано и то, и то — такой путаницы нет...

P.S. Да, еще я в таких случаях всегда ставлю min-width для body.

Edited November 2, 2010 by SelenIT

Great Rash · November 2, 2010

Нет, просто добавлением бекграунда для <html> проблема не решается. И дело не в том, что фон куда-то переносится. Дело в том, стоит фон на месте или смещается относительно необходимого нам элемента.

SelenIT · November 2, 2010

Сорри, min-width для body еще нужен. Я его просто на автомате ставлю, если сайт не должен сжиматься меньше опред. лимита, поэтому до меня не сразу дошло, что его нет в примере.

И еще, вариант с display:table для html у меня порвал цепочку 100%-й высоты (FF 3.6.11), чтоб ее починить, пришлось еще добавить display:table-cell для body.

Edited November 2, 2010 by SelenIT

Great Rash · November 2, 2010

Да с минимальной шириной все работает как надо. Для случая где нужна минимальная ширина ваш вариант лучше подходит. Ну вот и мне в копилку знаний привалило Благодарю за еще один способ!

psywalker · November 2, 2010

А я всех обманул и получил двойные знания в копилку

Great Rash

Кстати стой, не совсем пашет решение. Смотри, когда ширина экрана становится меньше блока с красной рамкой, то фон остаётся на месте, как ты и задумал. НО стоит ширие уменьшится ещё меньше, то фон начинает двигаться.

Что делать?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">

<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<style type="text/css">
* {
margin: 0;
padding: 0;
}

html,
body {
height: 100%;


}

html {
display: table;
width: 100%;
font-size: 100.1%;
}

body {
font: 62.5%/1.5em Arial, Tahoma, Verdana, sans-serif;
color: #000;
background: #fff url('http://www.futurama-madhouse.net/misc/FuturamaCast.png') 50% 0 no-repeat;
display:table-cell;
min-width: 950px;
}

div {
width: 950px;
height: 100%;
margin: 0 auto;
border: red 1px solid;
}

div div {
width: 100px;
height: 100px;
margin: 0 auto;
background: red;
}
</style>
</head>

<body>

<div>
<div>

</div>
</div>

</body>
</html>

mishka · November 2, 2010

Дык это старая трабла

html { min-width: 950px; }

и никаких тейблов, которые имеют немалые шансы в другом месте боком вылезти

SelenIT · November 2, 2010

И действительно . О настолько простом фиксе я и не подумал (засело в мозгу откуда-то про "html всегда наследует размеры viewport-а" и мешало думать в правильную сторону). Вот и тройные знания в копилку . Спасибо, mishka2!

Единственное, что чуть смущает — не помешает ли такой способ корректно снять скриптом внутренние размеры окна (напр., для показа красивого тултипа)?

psywalker · November 2, 2010

Отличное, а главное простое решение. Спасиб Медведь

mishka · November 2, 2010

Да незачто, ребят. Вот и я на чтото сгодился. Осталось только проверить как оно себя поведет в ситуации о которой говорил SelenIT.

С этим поведением бг я столкнулся как FF3 вышел. Вот немогу сейчас сказать как оно работало в FF2, но вот как только FF3 вышел, так я с этим и столкнулся.

Edited November 2, 2010 by mishka2

Great Rash · November 3, 2010

О! Спасибо за еще одно решение! Со скриптом надо будет потестить как время будет (если не забуду).

Кстати стой, не совсем пашет решение. Смотри, когда ширина экрана становится меньше блока с красной рамкой, то фон остаётся на месте, как ты и задумал. НО стоит ширие уменьшится ещё меньше, то фон начинает двигаться.
Что делать?

Не заметил такого поведения, надо посмотреть будет.

psywalker · November 3, 2010

Со скриптом надо будет потестить как время будет (если не забуду).

О каком скрипте идёт речь?

Great Rash · November 3, 2010

Нормально ли будет определяться ширина окна если для <html> задать min-width.

Sign In

Правильное выравнивание больших бекграундов

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information