Применение фона к <html> и/или <body>

http://jsfiddle.net/julien_c/GmAL4/

Я обнаружил, что если вы применяете фон CSS к body, он занимает всю страницу (независимо от фактической высоты или ширины body).

Однако, если вы примените фон CSS для html и body, фон для body не займет всю страницу.

Является ли это несоответствие ожидаемым поведением?

Как я могу наложить два полноэкранных фона (скажем, цвет фона и полупрозрачное изображение?)

Ответы

Ответ 1

Это правильное поведение. 1body не сразу занимает всю высоту viewport, даже если он появляется, когда вы используете только фон для последнего. Фактически элемент html будет зависеть от фона body, если вы не дадите ему свой собственный фон, а html передаст это в окно просмотра:

Фон корневого элемента становится фоном холста, а его область рисования фона распространяется на весь холст, хотя любые изображения имеют размер и расположение относительно корневого элемента, как если бы они были нарисованы только для этого элемента. (Другими словами, область фонового позиционирования определяется как для корневого элемента.) Если значение "background-color" для корня "прозрачно", цвет фона холста зависит от UA. Корневой элемент снова не нарисовал этот фон, т.е. Используемое значение его фона прозрачно.

Для документов, корневым элементом которых является элемент HTML html или элемент XHTML html: если вычисленное значение "background-image на корневом элементе" равно "none", а его "фоновый цвет" прозрачен, пользователь агенты должны вместо этого распространять вычисленные значения свойств фона из этого элемента сначала HTML body или XHTML body дочерний элемент. Используемые значения этих свойств фона элемента body являются их начальными значениями, а распространяемые значения обрабатываются так, как если бы они были указаны в корневом элементе. Рекомендуется, чтобы авторы HTML-документов указывали фон canvas для элемента body, а не элемент html.

Тем не менее, вы можете наложить любое фоновое изображение на фоновый цвет на один элемент (либо html или body), не полагаясь на два элемента - просто используйте background-color и background-image или объединить их в сокращенном свойстве background : 
body {
    background: #ddd url(background.png) center top no-repeat;
}

Если вы хотите объединить два фоновых изображения, вам нужно опираться на несколько фонов. Для этого есть всего два дня:

  • В CSS2, это то, где удобно стилизовать оба элемента: просто установите фоновое изображение на html и другое изображение на body, которое вы хотите наложить поверх первого. Чтобы фоновое изображение на дисплеях body отображалось на полной высоте окна просмотра, вам необходимо также применить height и min-height:

    html {
    height: 100%;
    background: #ddd url(background1.png) repeat;
}

body {
    min-height: 100%;
    background: transparent url(background2.png) center top no-repeat;
}

    Кстати, причина, по которой вам нужно указывать height и min-height на html и body соответственно, - это потому, что ни один элемент не имеет внутренней высоты. Оба по умолчанию равны height: auto. Он имеет высоту 100%, поэтому height: 100% берется из окна просмотра, а затем применяется к body как минимум, чтобы разрешить прокрутку содержимого.

  • В CSS3 синтаксис был расширен, поэтому вы можете объявить несколько значений фона в одном свойстве, устраняя необходимость применить фоны к нескольким элементам (или отрегулировать height/min-height):

    body {
    background: url(background2.png) center top no-repeat, 
                #ddd url(background1.png) repeat;
}

    Единственное предостережение заключается в том, что на одном многослойном фоне только нижний слой может иметь фоновый цвет. В этом примере вы можете увидеть, что значение transparent отсутствует на верхнем уровне.

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

Если вам нужно поддерживать старые браузеры, вам нужно перейти с помощью метода CSS2, который поддерживается полностью на IE7.

Мои комментарии в этом другом ответе объясняют с сопровождающим fiddle, как body на самом деле смещается от html по умолчанию, несмотря на то, что похоже, что он был дополнен вместо этого снова из-за этого, казалось бы, странного явления.

1 Это может иметь свои корни в настройке атрибутов HTML background и bgcolor body, заставляя атрибут фона применяться ко всему окну просмотра. Подробнее об этом здесь.