Бэкграунд css – CSS-фон

08.07.2020 Facebook Twitter LinkedIn Google+ Советы художника

background | htmlbook.ru

CSSInternet ExplorerChromeOperaSafariFirefoxAndroidiOS
2.16.0+8.0+1.0+3.5+1.0+1.0+2.1+1.0+
39.0+1.0+10.5+1.3+3.6+2.1+1.0+

Краткая информация

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. В CSS3 допустимо указывать параметры сразу нескольких фонов, перечисляя их через запятую.

Синтаксис

Здесь:

<фон> = [background-attachment || background-image || background-position || background-repeat] | inherit

<последний_фон> = [background-attachment || background-color || background-image || background-position || background-repeat] | inherit

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

Значения

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

Пример 1

XHTML 1.0CSS2.1IECrOpSaFx

<!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">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>background</title>
  <style type="text/css">
   div {
    height: 200px; /* Высота блока */
    width: 200px; /* Ширина блока */
    overflow: auto; /* Добавляем полосы прокрутки */
    padding-left: 15px; /* Отступ от текста слева */
    background: url(images/hand.png) repeat-y #fc0; /* Цвет фона, 
                                                    путь к фоновому изображению и 
                                                    повторение фона по вертикали */
   }
  </style>
 </head>
 <body>

  <div>
   Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie 
   consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et 
   iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore
   te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion 
   ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te 
   feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.
  </div>

 </body>
</html>

Результат данного примера показан ниже (рис. 1).

Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера

Пример 2

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background</title>
  <style>
   body {
    background: url(images/hand.png) repeat-y, 
                #fc0 url(images/bg-right.png) repeat-y 100% 0;
   }
  </style>
 </head>
 <body>
 </body>
</html>

Объектная модель

[window.]document.getElementById(«elementID»).style.background

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

htmlbook.ru

background | CSS | WebReference

Универсальное свойство background позволяет установить одновременно несколько характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. Допустимо, также, указывать параметры сразу нескольких фонов, перечисляя их через запятую.

Краткая информация

Значение по умолчаниюtransparent || none || repeat || scroll || 0% 0%
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяДа

Синтаксис ?

background: [<фон>, ]* <последний_фон>

Здесь:

<фон> = background-image || background-position [ / background-size ]? || background-repeat || background-attachment || background-origin || background-clip

<последний_фон> = background-image || background-position [ / background-size ]? || background-repeat || background-attachment || background-origin || background-clip || background-color

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

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#
×

Значения

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

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background</title>
  <style>
   div {
    height: 200px; /* Высота блока */
    width: 200px; /* Ширина блока */
    overflow: auto; /* Добавляем полосы прокрутки */
    padding-left: 15px; /* Отступ от текста слева */
    background: url(/example/image/hand.png) repeat-y #fc0; /* Цвет фона, 
                                                    путь к фоновому изображению и 
                                                    повторение фона по вертикали */
   }
  </style>
 </head>
 <body>
  <div>Великобритания, куда входят Пик-Дистрикт, Сноудония и 
  другие многочисленные национальные резерваты природы и парки, 
  неумеренно применяет культурный рельеф. Суша морей начинает 
  туристический подземный сток. Дождливая погода дегустирует кандым. 
  Винный фестиваль проходит в приусадебном музее Георгикон, там же 
  беспошлинный ввоз вещей и предметов в пределах личной потребности 
  связывает белый саксаул. Санитарный и ветеринарный контроль 
  оформляет городской Гвианский щит.</div>
 </body>
</html>

Результат данного примера показан ниже (рис. 1).

Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background</title>
  <style>
   body {
    background: url(/example/image/hand.png) repeat-y, 
                url(/example/image/bg-right.png) repeat-y 100% 0, #fc0;
   }
  </style>
 </head>
 <body>
 </body>
</html>

Объектная модель

Объект.style.background

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.
×

Браузеры ?

 
один фон41213.511
несколько фонов912110.51.33.6
один фон2.11103.2
несколько фонов2.11103.2

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 18.03.2018

Редакторы: Влад Мержевич

webref.ru

Свойство background | CSS справочник

CSS свойства

Определение и применение

CSS свойство background позволяет установить необходимые свойства фона в одном объявлении (универсальное свойство). Значения могут быть указаны в любом порядке (и в любом необходимом количестве), браузер автоматически определит, какое из них соответствует необходимому свойству.

Значения следующих свойств могут быть установлены:

Обращаю Ваше внимание на то, что если Вы используете для фона элемента значения position и size вместе, то вы должны при этом разделять их слэшем «/» (position/size).

Подробную информацию о работе с задним фоном элементов Вы можете найти в следующей статье учебника:

Поддержка браузерами

CSS синтаксис:

background:"color image position/size repeat origin clip attachment initial | inherit";

JavaScript синтаксис:

object.style.background="blue no-repeat"

Значения свойства

ЗначениеОписание
background-colorОпределяет цвет фона (HEX, RGB, RGBA, HSL, HSLA, «Предопределённые цвета»).
background-imageЗадает одно или несколько фоновых изображений для элемента.
background-positionЗадает положение (позицию) фонового изображения.
background-sizeОпределяет размер фонового изображения/-ий.
background-repeatУстанавливает, как фоновое изображение будет повторяться.
background-originОпределяет область позиционирования фонового изображения/-ий.
background-clipОпределяет область рисования фона.
background-attachmentУстанавливает, поведение фонового изображения во время прокрутки (фиксированное или прокручивается с остальной частью страницы).
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1 (в CSS3 добавлены свойства background-size, background-origin и background-clip).

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования универсального свойства background</title>
<style> 

 
.primer {
background:#00FF00 url('/images/smile.png') repeat-x center; /* свойства фона для элемента */
height:150px; /* высота элемента */
}
</style>
</head>
	<body>
		<div class = "primer"></div>
	</body>
</html>

В этом примере с использованиме CSS свойства height мы задали для блочного элемента <div> высоту 150 пикселей и с использованием универсального CSS свойства background указали следующие значения для его фона:

  • зеленый цвет заднего фона в шестнадцатерично системе указания цвета — #00FF00 (background-color).
  • путь к изображению, которое используется в качестве заднего фона (smile.png) (background-image).
  • указали, что наше изображение повторяется только по оси X (background-repeat).
  • указали, что наше изображение позиционируется по центру (background-position).

Результат нашего примера:

CSS свойства

basicweb.ru

CSS свойство background

Короткое свойство, устанавливающее все свойства фона элемента за одну декларацию. Позволяет установить одновременно до пяти атрибутов стиля фона – background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment. Одновременно допустимо определять любые атрибуты.

CSS синтаксис

background: bg-color bg-image bg-position/bg-size bg-repeat bg-origin bg-clip bg-attachment | initial | inherit;

Возможные значения

ЗначениеОписание
background-colorУстанавливает цвет фона.
background-imageУстанавливает фоновое изображение.
background-positionУстанавливает положение фонового изображения.
background-sizeУстанавливает размер фонового изображения.
background-repeatОпределяет, как будет повторяться фоновое изображение.
background-originУстанавливает область позиционирования фонового изображения.
background-clipУстанавливает область прорисовки фонового изображения.
background-attachmentУстанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента.
initialУстанавливает значение по умолчанию.
inheritЗначение наследуется от родительского элемента.

Если среди параметров присутствует декларация размера bg-size, то он должен быть отделен от параметра позиции bg-position при помощи слэша (/), например, background:url(smiley.gif) 10px 20px/50px 50px; задает фоновое изображение, расположенное в позиции 10 пикселей от левого края, 20 пикселей от верхнего края, и размер изображения будет 50х50 пикселей.

Если устанавливается несколько фоновых изображений, но при этом нужно еще установить и фоновый цвет, то параметр background-color должен быть последним в списке.

Пример

Устанавливаем атрибуты фона элемента body


body {
   background: red url(images/poobah.gif) no-repeat top left;
}

msiter.ru

background-origin | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+4.0+10.1+10.5+3.1+5.0+3.6+4.0+2.1+3.0+1.0+

Краткая информация

Значение по умолчаниюpadding-box
НаследуетсяНет
ПрименяетсяКо всем элементам
Процентная записьНеприменима
Ссылка на спецификациюhttp://www.w3.org/TR/css3-background/#background-origin

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Свойство background-origin определяет область позиционирования фонового рисунка. Это свойство не применяется, когда значение background-attachment задано как fixed.

Синтаксис

background-origin: [padding-box | border-box | content-box] [, [padding-box | border-box | content-box]]*

Значения

padding-box
Фон позиционируется относительно края элемента с учетом толщины границы.
border-box
Фон позиционируется относительно границы, при этом линия границы может перекрывать изображение.
content-box
Фон позиционируется относительно содержимого элемента.

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

Результат использования значений свойства background-origin для элемента с рамкой толщиной 20 пикселов показан на рис. 1.

padding-box border-box content-box

Рис. 1. Результат применения разных значений

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-origin</title>
  <style>
   .example {
    border: 20px solid #fc0;
    padding: 20px;
    height: 200px;
    background: url(images/figure.jpg) no-repeat;
    background-origin: content-box;
   }
  </style>
 </head>
 <body>
  <div>...</div>
 </body>
</html>

Браузеры

Если фон задан один, а значений background-origin несколько, то браузеры покажут разное поведение. Firefox и Opera используют первое значение, Chrome и Safari создадут несколько фоновых рисунков.

Safari до версии 5.0, Android до версии 3.0 поддерживают нестандартное свойство -webkit-background-origin.

Opera до версии 10.1 поддерживает нестандартное свойство -o-background-origin.

Firefox до версии 4.0 поддерживает нестандартное свойство -moz-background-origin.

htmlbook.ru

Comments
Leave Comment