Фон элемента

Последнее обновление: 21.04.2016

Фон элемента описывается в CSS свойством background. Фактически это свойство представляет сокращение набора следующих свойств CSS:

  • background-color: устанавливает цвет фона

    background-color: #ff0507;

  • background-image: в качестве фона устанавливается изображение

    background-image: url(dubi.png);

    Это свойство принимает одно значение: ключевое слово url, после которого в скобках идет путь к файлу изображения. В данном случае имеется в виду, что в одной папке рядом с веб-страницей находится файл dubi.png.

    Также можно использовать абсолютные адреса URL, например:

    background-image: url(http://localhost.com/someimage.png);

    Либо можно использовать относительные адреса - относительно html-документа или корневого каталога сайта:

    background-image: url(../images/someimage.png);	/* путь относительно html-документа */

  • background-repeat: устанавливает режим повторения фонового изображения по всей поверхности элемента

  • background-size: устанавливает размер фонового изображения

  • background-position: указывает позицию фонового изображения

  • background-attachment: устанавливает стиль прикрепления фонового изображения к элементу

  • background-clip: определяет область, которая вырезается из изображения и используется в качестве фона

  • background-origin: устанавливает начальную позицию фонового изображения

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
		div{
			width: 250px;
			height: 200px;
			margin: 10px;
		}
		
		.colored{
			background-color: #ff0507;
		}
		
		.imaged{
			background-image: url(dubi.png);
		}
        </style>
    </head>
    <body>
		<div class="colored">Первый блок</div>
		<div class="imaged">Второй блок</div>
    </body>
</html>

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

Свойство background в CSS 3

Повторение изображения

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

С помощью свойства background-repeat можно изменить механизм повторения. Оно может принимать следующие значения:

  • repeat-x: повторение по горизонтали

  • repeat-y: повторение по вертикали

  • repeat: повторение по обеим сторонам (действие по умолчанию)

  • space: изображение повторяется для заполнения всей поверхности элемента, но без создания фрагментов

  • round: изображение должным образом масштабируется для полного заполнения всего пространства

  • no-repeat: изображение не повторяется

Например:

div{
	width: 200px;
	height: 150px;
			
	background-image: url(dubi.png);
	background-repeat: round;
}

Размер изображения

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

  • contain: масштабирует изображение по наибольшей стороне, сохраняя аспектное отношение

  • cover: масштабирует изображение по наименьшей стороне, сохраняя аспектное отношение

  • auto: значение по умолчанию, изображение отображается в полный размер

Если нужно масштабировать изображение таким образом, чтобы оно оптимальнее было вписано в фон, то для обеих настроек можно установить значение 100%:

background-size: 100% 100%;

Если задаются точные размеры, то вначале указывается ширина, а потом высота изображения:

background-size: 200px 150px;	/* ширина 200 пикселей, высота 150 пикселей */

Можно задать точное значение для одного измерения - ширины или высоты, а для другого задать автоматические размеры, чтобы браузер сам выводил точные значения:

background-size: 200px auto;	/* ширина 200 пикселей, автоматическая высота */

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
		div{
			width: 200px;
			height: 150px;
			margin: 10px;
			
			border: black solid 1px;
			background-image: url(dubi.png);
			
		}
		.imaged1{
			
			background-size: cover;
		}
		.imaged2{
			
			background-size: 140px 110px;
		}
        </style>
    </head>
    <body>
		<div class="imaged1"></div>
		<div class="imaged2"></div>
    </body>
</html>

Во втором случае изображение будет масштабироваться до размеров 140х110. Поскольку у нас еще остается место на элементе, то по умолчанию изображение будет повторяться для заполнения всей поверхности:

Свойство background-size в CSS 3

Позиция изображения

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

background-position: отступ_по_оси_X отступ_по_оси_Y;

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
		div{
			width: 300px;
			height: 250px;
			margin: 10px;
			
			border: 1px solid #ccc;
			background-color: #eee;
			background-image: url(dubi.png);
			background-repeat: no-repeat;
			background-position: 20px 15px;	
		}
        </style>
    </head>
    <body>
		<div>Туман начинал расходиться, и неопределенно, верстах в двух расстояния, виднелись уже неприятельские 
			войска на противоположных возвышенностях...</div>
    </body>
</html>
background-position в CSS 3

Кроме того, данное свойство может принимать одно из следующих значений:

  • top: выравнивание по верхнему краю элемента

  • left: выравнивание по левому краю элемента

  • right: выравнивание по правому краю элемента

  • bottom: выравнивание по нижнему краю элемента

  • center: изображение располагается по центру элемента

Например:

background-position: top right;

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

background-attachment

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

  • fixed: фон элемента фиксирован вне зависимости от прокрутки внутри элемента

  • local: по мере прокрутки внутри элемента фон изменяется

  • scroll: фон фиксирован и не меняется при прокрутке, но в отличие от fixed несколько элементов могут использовать свой фон, тогда как при fixed создается один фон для всех элементов

Например:

div{
	width: 300px;
	height: 250px;
	
			
	overflow:scroll;	/* добавляем прокрутку  */
	border: 1px solid #ccc;
	
	background-image: url(dubi.png);
	background-size: 512px 384px;
	background-attachment: scroll;
	background-repeat: no-repeat;
}

background-origin

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

  • border-box: фон у элемента устанавливается начиная с его внешней границы, определяемой свойством border

  • padding-box: фон устанавливается с учетом внутренних отступов

  • content-box: фон устанавливается по содержимому элемента

Используем все три значения:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
		div{
			width: 200px;
			height: 200px;
			margin: 10px;
			display: inline-block;	/* располагаем блоки в ряд */
			color: #eee;
			
			padding:15px;
			border: 15px solid rgba(23,23,23,0.2);
			
			background-image: url(cats.jpg);
			background-size: cover;
			background-repeat: no-repeat;
		}
		.borderBox {background-origin: border-box;}
		.paddingBox {background-origin: padding-box;}
		.contentBox {background-origin: content-box;}
        </style>
    </head>
    <body>
		<div class="borderBox">
			Вся власть - котикам!
		</div>
		<div class="paddingBox">
			Вся власть - котикам!
		</div>
		<div  class="contentBox">
			Вся власть - котикам!
		</div>
	</body>
</html>
Свойство background-origin в CSS 3

background-clip

Свойство background-clip определяет, какая часть изображения используется для фона. Он принимает те же значения:

  • border-box: изображение обрезается по границам элемента

  • padding-box: из изображения исключается та часть, которая находится под границами элемента

  • content-box: изображение обрезается по содержимому с учетом внутренних отступов

Например, если к предыдущей разметке мы применим следующие стили:

div{
	width: 200px;
	height: 200px;
	margin: 10px;
	display: inline-block;
			
	color: #eee;
	padding:15px;
	border: 15px solid rgba(23,23,23,0.1);
			
	background-image: url(cats.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}
.borderBox{background-clip: border-box;}
.paddingBox{background-clip: padding-box;}
.contentBox{background-clip: content-box;}

Тогда мы получим следующий результат:

Свойство background-clip в CSS 3

Свойство background

Свойство background по сути является сокращением всех ранее рассмотренных свойств CSS в формате:

background: <background-color> <background-position> <background-size>
<background-repeat> <background-origin> <background-clip> <background-attachment>
<background-image>

Например, если у нас есть следующий набор свойств:

background-image: url(cats.jpg);
background-color: #eee;
background-repeat: no-repeat;
background-clip: border-box;
background-origin: border-box;
background-attachment: local;

То мы их можем сократить следующим образом:

background: #eee no-repeat border-box local url(cats.jpg);

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850