Установка фона в CSS
http://belarusweb.net
Основы создания сайтов

Установка фона

Фон элемента, css-свойства
background-color и background-image

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

Цвет фона определяется при помощи ненаследуемого свойства background-color, которое принимает те же значения цвета, что и свойство color (смотреть). Также в качестве фона разрешается использовать изображения. Для этого нужно использовать свойство background-image, которое в качестве значений принимает путь к одному или нескольким файлам изображений, перечисляемых через запятую в формате {background-image: url("path_1"), url("path_2"), ...}, где путь, опять же, можно писать как в кавычках, так и без них. Если фоновых изображений указывается несколько, то приоритет будет отдаваться первым из них, т.е. изображения, указанные впереди, будут располагаться выше остальных в порядке своего перечисления в значении свойства. Отметим, что в качестве значения может использоваться ключевое слово none, которое отменяет установку фона. Браузеры используют это значение по умолчанию, а также в случае, если фоновое изображение по каким-либо причинам не может быть загружено. Для исключения таких ситуаций разрешается одновременное использование свойств background-color и background-image. В этом случае фон будет отображаться до момента полной загрузки фонового изображения или вместо него из-за невозможности установки изображения в качестве фона элемента.

Использование свойств background-color, background-image показано в примере 4.2.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка фона</title>
	<style>
		.background_1{
		width: 300px;
		border: solid 2px;
		background-color: yellow;
		}
		.background_2{
		width: 300px;
		height: 200px;
		border: solid 2px green;
		background-color: #0000ff;
		background-image: 
	url("css_uchebnik_examples_4/balls_2015.jpg");
		}
	</style>
</head>
<body>
	<p class="background_1">
		Данный абзац имеет желтый фон.
	</p>
	
	<p class="background_2">
		По умолчанию фоновое изображение располагается браузером в левом
		верхнем углу и затем повторяется по вертикали и горизонтали. 
		Если изображение не будет загружено, то будет использован синий фон, 
		заданный в свойстве background-color.
	</p>
</body>
</html>

Пример 4.2. Установка фона элемента

Повторение фона,
css-свойство background-repeat

Когда браузер устанавливает изображение в качестве фона элемента, он, по умолчанию, размещает его в верхнем левом углу и затем тиражирует по вертикали и горизонтали до заполнения выделенной под фон области элемента. Если нужно изменить такое поведение браузера, следует использовать ненаследуемое свойство background-repeat (см. пример 4.3), которое может принимать следующие значения:

  • repeat – используется браузером по умолчанию, повторяя изображение по вертикали и горизонтали;
  • repeat-x – изображение повторяется только по горизонтали;
  • repeat-y – изображение повторяется только по вертикали;
  • no-repeat – изображение не повторяется;
  • space – изображение повторяется таким образом, чтобы полностью заполнить область; если же это не удаётся, между картинками добавляется пустое пространство;
  • round – изображение повторяется таким образом, чтобы в области поместилось целое число рисунков; если же это не удаётся, фоновые рисунки масштабируются.

Отметим, что допустимо указывать через пробел сразу два значения: первое ключевое слово задаёт повторение по горизонтали, второе – по вертикали. При этом ключевыми словами не должны быть repeat-x или же repeat-y.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка фона</title>
	<style>
		.background_1{
		width: 310px;
		height: 100px;
		border: solid 2px red;
		background-color: yellow;
		background-repeat: repeat-x;
		background-image: 
	url("css_uchebnik_examples_4/cabinet.png");
		}
		.background_2{
		width: 310px;
		height: 100px;
		border: solid 2px green;
		background-repeat: no-repeat round;
		background-image: 
	url("css_uchebnik_examples_4/cabinet.png");
		}
	</style>
</head>
<body>
	<p class="background_1">	</p>
	
	<p class="background_2">	</p>
</body>
</html>

Пример 4.3. Использование свойства background-repeat

Стартовая позиция фона,
css-свойство background-position

Чтобы указать браузеру, где ему следует разместить фоновое изображение, следует использовать ненаследуемое свойство background-position, которое определяет начальное положение фонового изображения (см. пример 4.4). Свойство может принимать как одну пару значений (или одиночное значение), так и несколько пар значений (или одиночных значений), разделяемых запятой для каждого изображения, указанного в значении свойства background-image:

  • x y – первое значение указывает позицию фонового изображения по горизонтали, а второе (через пробел) – по вертикали; в качестве координат могут приниматься любые доступные в CSS единицы измерения, а также проценты, в любом сочетании; при этом считается, что верхний левый угол задается координатами 0 0, например, 0px 0em; если указано только одно значение, то второе принимается за 50%; если координаты заданы в процентах, то нижний правый угол задается координатами 100% 100%;
  • ключевые слова – вместо координат разрешается использовать ключевые слова left (x=0%), center (x=50%), right (x=100%) вместо координаты x и top (y=0%), center (y=50%), bottom (y=100%) вместо координаты y. Например, center top соответствует паре координат в процентах 50% 0% и т.д.
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка фона</title>
	<style>
		.background_1{
		width: 400px;
		height: 80px;
		border: solid 2px red;
		background-color: yellow;
		background-repeat: no-repeat;
		background-image: 
	url("css_uchebnik_examples_4/cabinet.png");
		}
		
		.background_2{background-position: 30px 60%;}
		.background_3{background-position: 80% 2em}
		.background_4{background-position: center bottom;}
	</style>
</head>
<body>
	<p class="background_1 background_2">30px 60%;</p>
	<p class="background_1 background_3">80% 2em</p>
	<p class="background_1 background_4">center bottom</p>
</body>
</html>

Пример 4.4. Использование свойства background-position

Масштабирование фона,
css-свойство background-size

Имеется в CSS и возможность масштабирования фонового изображения, которая осуществляется за счет использования ненаследуемого свойства background-size (см. пример 4.5), задающего необходимые размеры изображения в зависимости от принимаемых значений:

  • auto – не изменяет исходный размер изображения, используется браузером по умолчанию;
  • размеры – пара значений, указываемых через пробел, определяют ширину и высоту фонового изображения в любых доступных в CSS единицах измерения; если будет указано только одно значение, т.е. ширина, то высоту браузер рассчитает автоматически с сохранением пропорций изображения;
  • % – пара значений, но указанных в процентах; первое значение определяет ширину фонового изображения относительно ширины элемента, а второе определяет его высоту относительно высоты элемента; если будет указано только одно значение, браузер будет рассчитывать размеры относительно ширины элемента;
  • cover – изображение будет масштабировано с сохранением пропорций под размеры элемента, при этом часть изображения может быть обрезано в зависимости от размеров ширины и высоты как фонового изображения, так и самого элемента;
  • contain – изображение будет масштабировано с сохранением пропорций таким образом, чтобы полностью поместиться внутри элемента, при этом изображение нигде не обрезается, но необязательно покрывает всю необходимую фоновую область элемента.
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка фона</title>
	<style>
		.background_1{
		width: 400px;
		height: 80px;
		border: solid 2px red;
		background-color: yellow;
		background-repeat: no-repeat;
		background-image: 
	url("css_uchebnik_examples_4/balls_2015.jpg");
		}
		
		.background_2{background-size: cover;}
		.background_3{background-size: contain}
		.background_4{background-size: 20%;}
	</style>
</head>
<body>
	<p class="background_1 background_2">cover - высота изображения 
	больше его ширины, поэтому по ширине изображение приняло 
	ширину элемента, а по высоте было обрезано по высоте элемента.</p>
	<p class="background_1 background_3">contain - фоновое изображение 
	полностью поместилось в пределах элемента, но часть площади элемента 
	не была покрыта фоновым изображением.</p>
	<p class="background_1 background_4">20% - ширина и высота фонового 
	изображения равны 20% от ширины элемента. </p>
</body>
</html>

Пример 4.5. Использование свойства background-size

Выделение области под фон,
css-свойство background-clip

Чтобы указать браузеру какую область элемента следует использовать для фона, используется ненаследуемое свойство background-clip, принимающее следующие значения:

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

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

css-свойство background-attachment

Для управления поведением фонового изображения при прокрутке элемента, используется ненаследуемое свойство background-attachment. Оно может принимать следующие значения:

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

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

css-свойство background-origin

Чтобы указать браузеру относительно чего нужно позиционировать фоновое изображение внутри элемента, используется ненаследуемое свойство background-origin (см. пример 4.6), которое не применяется, если значение свойства background-attachment указано, как fixed. Также, если задано свойство background-size, то приоритет будет отдан браузером значению этого свойства. Перечислим значения, принимаемые свойством:

  • border-box – фоновое изображение позиционируется относительно левого верхнего угла элемента, включая содержимое, отступы и границы, при этом часть изображения может перекрываться линиями границ элемента;
  • padding-box – фоновое изображение позиционируется относительно левого верхнего угла области, включающей содержимое и внутренние отступы элемента, но не включающей границы элемента;
  • content-box – фоновое изображение позиционируется относительно левого верхнего угла области содержимого элемента (прямоугольная область без учета отступов и границ).
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка фона</title>
	<style>
		.background_1{
		padding: 10px;
		width: 300px;
		height: 60px;
		border: dotted 6px red;
		background-color: yellow;
		background-repeat: no-repeat;
		background-image: 
	url("css_uchebnik_examples_4/cabinet.png");
		}
		
		.background_2{background-origin: border-box;}
		.background_3{background-origin: padding-box}
		.background_4{background-origin: content-box}
	</style>
</head>
<body>
	<p class="background_1 background_2">border-box</p>
	<p class="background_1 background_3">padding-box</p>
	<p class="background_1 background_4">content-box </p>
</body>
</html>

Пример 4.6. Использование свойства background-origin

Универсальное css-свойство background

Опять же, в CSS для одновременного определения сразу нескольких характеристик фона присутствует ненаследуемое универсальное свойство background. В качестве значений свойства можно в любом порядке через пробел задать значения свойств background-color, background-image, background-position, background-repeat, background-attachment, background-size, background-origin и background-clip (см. пример 4.7). Если какое-то из значений не будет указано, браузер применит вместо него значение по умолчанию.

Свойства background-position и background-size принимают свои значения в одном и том же формате. Поэтому, если необходимо задать значение свойства background-size, оно должно указываться через слэш '/' после значения свойства background-position. Если задано только одно значение, браузер считает, что задано значение свойства background-position.

Кроме того, свойства background-origin и background-clip имеют одни и те же название ключевых слов, принимаемых в качестве значений. Поэтому в случае, когда в элементе установлены как фоновое изображение, так и фон, браузер будет считать, что заданы оба свойства, выделяя соответствующую область элемента под фон и позиционируя соответствующим образом фоновое изображение. Задавать через пробел или слэш '/' значения обоих свойств не разрешается.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка фона</title>
	<style>
		.background_1{
		padding: 10px;
		width: 300px;
		height: 60px;
		border: dotted 6px red;
		}
		.background_2{
		background: #00ff00 fixed padding-box;
		}
		.background_3{
		background: no-repeat #00ff00  content-box 100px 30px/15px 15px
		url("css_uchebnik_examples_4/cabinet.png");
		}
		.background_4{
		background: no-repeat #00ff00 content-box 
		url("css_uchebnik_examples_4/cabinet.png");
		}
	</style>
</head>
<body>
	<p class="background_1 background_2">
		#00ff00 fixed padding-box
	</p>
	<p class="background_1 background_3">
		no-repeat #00ff00  content-box <br> 100px 30px/15px 15px url("path")
	</p>
	<p class="background_1 background_4">
		no-repeat #00ff00  content-box url("path")
	</p>
</body>
</html>

Пример 4.7. Использование универсального свойства background

css-функция linear-gradient()

Отдельно отметим, что красивого визуального эффекта фона можно добиться за счет использования функций linear-gradient() и radial-gradient(), которые могут использоваться в качестве значений в свойствах background и background-image и добавляют, соответственно, линейный и радиальный градиент к фону изображения.

Функция linear-gradient() принимает в качестве аргументов угол или ключевое слово, стартовое значение цвета и конечное значение цвета. Например, запись linear-gradient(30deg, #000000, #ffffff) создает линейный градиент цвета от черного к белому вдоль градиентной прямой, которая расположена под углом в 30 градусов относительно вертикальной прямой. Значение угла может быть как положительным (отсчет ведется по часовой стрелке), так и отрицательным (отсчет ведется против часовой стрелки), но после него в любом случае сразу же и без пробела должно записываться обозначение единицы измерения deg (см. пример 4.8). Цвет может быть указан с использованием любой доступной в CSS цветовой модели. Кроме того, разрешается через запятую указывать более двух значений цветов, тогда цвет будет меняться волнами на протяжении всего градиентного направления от одного цвета к другому. Также следует отметить, что вместо значения угла разрешается использовать следующие ключевые слова:

  • to top – направление градиента снизу вверх (0deg);
  • to top right – направление градиента от нижнего левого угла к верхнему правому (45deg);
  • to right – направление градиента слева направо (90deg);
  • to bottom right – направление градиента от верхнего левого угла к нижнему правому (135deg);
  • to bottom – направление градиента сверху вниз (180deg);
  • to bottom left – направление градиента от верхнего правого угла к нижнему левому (225deg);
  • to left – направление градиента справа налево (270deg);
  • to top left – направление градиента от нижнего правого угла к верхнему левому (315deg).
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка фона</title>
	<style>
	.background_1{
	padding: 10px;
	width: 350px;
	height:100px;
	border: solid 6px red;
	}
		
	.background_2{background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff);}
	.background_3{background: linear-gradient(to top, #000000, #ffffff);}
	.background_4{background: linear-gradient(225deg, #000000, #ffffff);}
	.background_5{background: linear-gradient(to bottom left, #000000, #ffffff);}
	</style>
</head>
<body>
	<p class="background_1 background_2">
		Несколько значений указываются через запятую: <br>
		linear-gradient(90deg, #ff0000, #00ff00, #0000ff)
	</p>
	<p class="background_1 background_3">
		linear-gradient(to top, #000000, #ffffff)
	</p>
	<p class="background_1 background_4">
		linear-gradient(225deg, #000000, #ffffff)
	</p>
	<p class="background_1 background_5">
		linear-gradient(to bottom left, #000000, #ffffff)
	</p>
</body>
</html>

Пример 4.8. Использование функции linear-gradient()

css-функция radial-gradient()

Функция radial-gradient() в общем случае в качестве аргументов принимает радиусы a и b эллипса, координаты x и y центра эллипса относительно вершины верхнего левого угла элемента и значения цветов с указанием через пробел их горизонтальной позиции относительно центра эллипса. В качестве числовых аргументов могут использоваться любые доступные в CSS единицы измерения, а также проценты. Цвет также может быть указан с использованием любой доступной в CSS цветовой модели.

Рассмотрим в качестве примера конкретное использование функции с указанием всех перечисленных арументов: radial-gradient(150px 100px at 50% 50%, #ffffff 2px, #000000 30px, #dddddd 70px). Данная функция создает радиальные градиенты цветов от белого к черному и от черного к серому, которые распространяются от центра эллипса с радиусами 150px по горизонтали и 100px по вертикали (данные параметры определяют форму эллипса, если радиусы равны, то эллипс превращается в окружность). При этом координата x центра равна 50% от ширины элемента, а координата y50% от высоты элемента (повторимся, отсчет координат центра ведется от вершины верхнего левого угла элемента). Величины, которые указаны через пробел после значений цветов, представляют собой позиции соответствующих цветов на горизонтальной градиентной прямой, которые определяют резкость переходов от одного цвета к другому. В нашем примере белый цвет заполняет соответствующую эллиптическую область с горизонтальным радиусом длиной 2px и вертикальным радиусом, длина которого вычисляется браузером автоматически в зависимости от соотношения радиусов a и b, заданных в качестве аргументов функции. Затем происходит радиальный переход цвета от белого к черному, позиция которого находится на расстоянии 30px от центра эллипса на прямой, содержащей горизонтальный радиус нашего эллипса. После чего начинается новый переход от черного цвета к серому, позиция которого расположена на расстоянии 70px от центра эллипса. Остальная площадь элемента, отведенная под фон, если градиентная область не покрывает ее всю, будет залита серым цветом. Внимательно и неторопясь изучите пример 4.9, в котором показано использование функции. Обратите внимание, что рассмотренное нами значение функции было использовано для создания фона первого абзаца.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка фона</title>
	<style>
		.background_1{
		padding: 10px;
		width: 460px;
		height:110px;
		border: solid 6px red;
		}
		
	.background_2{background: 
	radial-gradient(150px 100px at 50% 50%, #ffffff 2px, #000000 30px, #dddddd 70px);}
	.background_3{background: 
	radial-gradient(150px 100px at 50% 50%, #ffffff, #000000 100px, #dddddd 200px);}
	.background_4{background: 
	radial-gradient(550px 200px at 30% 50px, #ffffff 20%, #000000 70%, #dddddd);}
	.background_5{background: 
	radial-gradient(300px 250px at 40% 100px, #ffffff, #000000, #dddddd);}
	</style>
</head>
<body>
	<p class="background_1 background_2">
		150px 100px at 50% 50%, #ffffff 2px, #000000 30px, #dddddd 70px
	</p>
	<p class="background_1 background_3">
		150px 100px at 50% 50%, #ffffff, #000000 100px, #dddddd 200px
	</p>
	<p class="background_1 background_4">
		550px 200px at 30% 50px, #ffffff 20%, #000000 70%, #dddddd
	</p>
	<p class="background_1 background_5">
		300px 250px at 40% 100px, #ffffff, #000000, #dddddd
	</p>
</body>
</html>

Пример 4.9. Использование функции radial-gradient()

Если вместо двух радиусов указать только один, то будет задан градиент круглой формы, а в случае отсутствия значений градиент заполнит всю отведенную под фон область элемента. Вместо радиусов a и b разрешается использовать ключевые слова circle и ellipse. Первое из них задает радиальный градиент круглой формы, а второй используется по умолчанию и задает радиальный градиент эллиптической формы. В случае использования данных ключевых слов размеры эллипса (круга) либо не указываются вообще, либо через пробел используются следующие ключевые слова (см. пример 4.10):

  • closest-side – для круга радиус будет равен расстоянию от центра круга до ближайшей стороны элемента; для эллипса радиус a будет равен расстоянию от центра до ближайшей левой или правой стороны, а для радиуса b – до ближайшей верхней или нижней стороны элемента;
  • farthest-side – для круга радиус будет равен расстоянию от центра круга до самой удаленной стороны элемента; для эллипса радиус a будет равен расстоянию от центра до более удаленной левой или правой стороны, а для радиуса b – до более удаленной верхней или нижней стороны элемента;
  • closest-corner – для круга радиус будет равен расстоянию от центра круга до вершины ближайшего угла элемента; для эллипса радиусы вычисляются на основании расстояния от его центра до вершины ближайшего угла элемента;
  • farthest-corner – данное значение используется по умолчанию в случае, когда ключевое слово не указано; для круга радиус будет равен расстоянию от центра круга до вершины самого дальнего угла элемента; для эллипса радиусы вычисляются на основании расстояния от его центра до самого дальнего угла элемента.
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Установка фона</title>
	<style>
		.background_1{
		padding: 10px;
		width: 300px;
		height: 60px;
		border: solid 6px red;
		}
	.background_2{background: 
	radial-gradient(circle closest-side at 30% 40%, #ffffff, #000000);}
	.background_3{background: 
	radial-gradient(ellipse closest-side at 30% 40%, #ffffff, #000000);}
	.background_4{background: 
	radial-gradient(circle closest-corner at 30% 40%, #ffffff, #000000);}
	.background_5{background: 
	radial-gradient(ellipse closest-corner at 30% 40%, #ffffff, #000000);}
	.background_6{background: 
	radial-gradient(circle farthest-corner at 30% 40%, #ffffff, #000000);}
	.background_7{background: 
	radial-gradient(ellipse farthest-corner at 30% 40%, #ffffff, #000000);}
	
	</style>
</head>
<body>
	<p class="background_1 background_2"></p>
	<p class="background_1 background_3"></p>
	<p class="background_1 background_4"></p>
	<p class="background_1 background_5"></p>
	<p class="background_1 background_6"></p>
	<p class="background_1 background_7"></p>
</body>
</html>

Пример 4.10. Использование ключевых слов в функции radial-gradient()

Вместо координат центра эллипса также разрешается использовать ключевые слова, задающие его расположение:

  • at left top||at top left – в левом верхнем углу (0% 0%);
  • at center top||at top center||at top – по центру вверху (50% 0%);
  • at right top||at top right – в правом верхнем углу (100% 0%);
  • at right center||at center right||at right – справа по центру (100% 50%);
  • at right bottom||at bottom right – в правом нижнем углу (100% 100%);
  • at center bottom||at bottom center||at bottom – по центру внизу (50% 100%);
  • at left bottom||at bottom left – в левом нижнем углу (0% 100%);
  • at left center||at center left||at left – слева по центру (0% 50%);
  • at center center||at center – в центре элемента (50% 50%).

Что касается позиций цветов относительно центра радиальной области, то их можно не указывать или указывать только некоторые из них. В таких случаях браузер будет равномерно распределять позиции всех цветов, попадающих в соответствующие промежутки (см. пример 4.9).