Откуда начинается фон body?

[kostyanet]

Быстро ответ не нашел, явно надо знать правильные слова для поиска, а может его и нету.

Имеется вот такое хорошее начало

html{
	background-image:url("/assets/images/header.jpg"),
					url("/assets/images/repeat.png");
	background-repeat:no-repeat,repeat-y;
	background-color:#30040b;
}
body{
  /* поскипано лишнее */
	max-width:1280px;
	margin:0 auto;
}

Картинка header.jpg == 1280 пикс в ширину и не укладывается как видите. Фон начинается от края окна браузера. Так вот, а если уменьшить макс-ширину туловища (body), то фон все равно начинается от края окна браузера. Я подумал потому что надо в body засунуть эти стили и засунул - ничего не поменялось. Фон начинался от края окна, а не от края тега, который я сделал видимым outline:1px solid red; на время проверки.

Вопрос, как "залить" body фоном так, чтоб он начинался от левой границы туловища, а не от границы окна?

Временно пришлось убрать центральную выключку - margin:0 auto; - все уехало влево, а хочется чтобы четко стояло по центру и фон был только внутри контента в body шириной максимум 1280 пикс.

[kostyanet]

Ладно, покажу на примере: http://jsfiddle.net/pjLs594y/3/

Одинаковый фон с одинаковыми параметрами применен к body и к div. В див-е картинка начинается как и положено от указанной границы элемента, а туловищу положить на все эти параметры.

Поискал еще раз и подольше, все равно ответа так и не нашел.

Вопрос - почему и как заставить фон начинаться от края боди?

[clecar]

http://htmlbook.ru/css/border-style, а этим справочником пробовали пользоваться?

[Zend]

Вопрос - почему и как заставить фон начинаться от края боди?

padding: 0 мб боди поставить?

[mikhail.golovkin]

Это нормальное поведение и описано в спецификации: http://www.w3.org/TR/CSS21/colors.html

The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.

For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.

Т.о. нужно элементу html установить либо цвет, либо фон.

[kostyanet]

Это не та спецификация. Ежу понятно композинг без фона невозможен и если коренной элемент его не имеет, то будет не с чем сводить. Мне стопицот раз самому приходилось объяснять что нет никаких "прозрачных гифок", и вообще "прозрачности" в графике. Есть инструкция по смешиванию пикселов фона с пикселами изображения которая хранится в отдельном канале А (альфа), причем технически пикселы фона кладутся "сверху" пикселов изображения, хотя может показаться что они "просвечивают".

Вопрос был почему картинка начинается с координат вьюпорта, а не элемента body.

Оказалось потому что для body предусмотрено единственное исключение распространения стилей выше по иерархии. А поскольку выше только html - то он все и определяет.

Т.о. нужно элементу html установить либо цвет, либо фон.

Прикол, сработало.

[kostyanet]

Запутался в трех соснах, я, короче.

Все так и было - цвет фона стоял на хтмле, а картинка была в боди. Но тогда высоту боди, а значит и рендер картинки, определяет контент туловища и картинка запросто не достанет до низа экрана.

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

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

Ну и все, отсюда начинается поиск ответов почему фон не встает в боди, а распространяется до хтмл.

Ладно, хрен с ними, без всяких стилей страница по умолчанию - белый лист. Это явно не из технологии альфы вытекает такое отношение родителя и отпрыска из высшего света, а скорее всего результат практического применения.

В общем чтобы и фон распространялся за туловище и оставался на месте когда оно центрируется, сделал так

html{
	background-image:url("/assets/images/header.jpg"),
					url("/assets/images/repeat.png");
	background-repeat:no-repeat,repeat-y;
	background-size:1280px,1280px;
	background-position:top center,top center;
	background-color:#1b0206;
}
body{
	max-width:1280px;
	margin:0 auto;
}

Это просто сайт такой, необычный - там большая картинка фоном и он потом еще доращивается полоской. Я таких раньше не делал, теперь знаю как.

[kostyanet]

Теоретически если заставить боди растягиваться по вертикали до низа вьюпорта, то можно сделать по рекомендациям этих долбоящеров из вытри.орг

Это можно?

[mikhail.golovkin]

Чаще всего body растягивают след. образом:

html,
body {
    height: 100%;
}