Html body background: HTML Background Images

css — Применение фона к и/или

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

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

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

Тем не менее, вы можете наложить любое фоновое изображение на фоновый цвет на один элемент (либо html , либо body ), не полагаясь на два элемента — просто используйте

 body {
    background: #ddd url(background. png) по центру вверху без повторов;
}
 

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

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

   HTML {
      высота: 100%;
      background: #ddd url(background1.png) повтор;
  }
  тело {
      минимальная высота: 100%;
      background: прозрачный url(background2.png) по центру вверху без повторов;
  }
   

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

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

   корпус {
      фон: url(background2.png) по центру вверху без повторов,
                  #ddd url(background1.png) повторить;
  }
   

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

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

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

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

¹ _{Это может иметь свои корни в настройке HTML background и bgcolor атрибутов body , в результате чего атрибут background применяется ко всему экрану просмотра. Подробнее об этом здесь.}

Tutorial de HTML — Planos de Fundo

 <тело bgcolor="#000000">
<тело bgcolor="rgb(0,0,0)">
 

  gif">