Css свойство background

Свойство CSS background-color

Это свойство используется для заливки фона элемента цветом. В качестве значений можно использовать:

HEX или HEX с альфа-каналом

НЕХ (hexadecimal) — обозначение цвета в шестнадцатеричной системе счисления. Цвет задается в виде числа, состоящего из 6 символов, где первые два определяют красную часть цвета, следующие два — зеленую, а два последних — синюю. Перед числом ставится символ #, который означает, что следующий за ним набор цифр и букв — это шестнадцатеричное число.

Можно также задать прозрачность цвета, добавив в конце числа еще 2 символа (например, 00 — полностью прозрачный, ff — полностью непрозрачный). Эта фича поддерживается практически всеми браузерами, за исключением IE (не удивительно), Opera Mini и Opera Mobile.

RGB или RGBa

Цвет можно задать при помощи функций CSS и . Синтаксис предельно простой — значения красного, зеленого и синего (от 0 до 255) указываются через запятую. В функции указывается четвертый параметр — прозрачность (либо в процентах, либо в виде десятичной дроби от 0 до 1).

HSL или HSLa

HSL — расшифровывается как Hue — тон, Saturation — насыщенность и Lightness — светлота (да, есть такое слово). В CSS есть специальные функции для указания цвета в таком формате — и . В качестве аргументов обеих по порядку указываются:

hue — расположение тона на цветовом колесе (от 0 до 360)
saturation — насыщенность или интенсивность тона, т.е. степень его отличия от серого цвета, где 0% — серый, а 100% — полный цвет.
lightness — светлота или яркость, где 0% — максимально темный (черный), 50% — нормальный, 100% — максимально светлый (белый)
alpha (только для ) — прозрачность, которая указывается либо в процентах либо в виде десятичной дроби (0% или 0 — полностью прозрачный, 100% или 1 — полностью непрозрачный).

HTML-цвета

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

Ключевые слова

Кроме описанных выше вариантов, для указания цвета фона элемента в CSS можно использовать специальные ключевые слова:

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

How To Create a Blurry Background Image

Step 1) Add HTML:

Example

Css свойство overflow-y

<div class=»bg-image»></div><div class=»bg-text»> <h1>I am
John Doe</h1> <p>And I’m a Photographer</p></div>

Step 2) Add CSS:

Example

body, html { height: 100%;}* { box-sizing: border-box;}
.bg-image { /* The image used */ background-image: url(«photographer.jpg»); /* Add the blur effect */ filter: blur(8px); -webkit-filter:
blur(8px); /* Full height */ height: 100%;
/* Center and scale the image nicely */ background-position: center;
background-repeat: no-repeat; background-size: cover;}/*
Position text in the middle of the page/image */
.bg-text { background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */ color: white;
font-weight: bold; border: 3px solid #f1f1f1; position:
absolute; top: 50%; left: 50%; transform:
translate(-50%, -50%); z-index: 2; width: 80%;
padding: 20px; text-align: center;}

❮ Previous
Next ❯

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

Background-image

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

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

background-color (color | transparent| initial | inherit).
background-image (url | none | initial | inherit).
background-position (значение).
background-size (auto | length | cover | contain | initial | inherit).
background-repeat (repeat | repeat-x |repeat-y | no-repeat | initial | inherit).
background-origin (padding-box | border-box | content-box | initial | inherit).
background-clip (border-box | padding-box | content-box | initial | inherit).
background-attachment (scroll | fixed | local | initial | inherit).

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

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

«Учебник CSS 3. Статья ‘Работа с фоном элемента в CSS’.»

CSS Reference

Background-size

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

background-size

Свойство указывает браузеру размеры фонового изображения. Вы можете задать их в любых единицах длины (через пробел указывается сначала ширина, потом высота картинки). Если прописано только одно значение, то оно определит ширину, высота при этом останется исходной, то есть такой, как в файле изображения. Чтобы указать только высоту, а ширину оставить оригинальной, свойству background-size нужно задать значения auto размер (например, background-size: auto 300px).

В правиле можно использовать ещё два значения.

cover. Масштабирует фон по размерам блока с сохранением исходных пропорций картинки, то есть рисунок не растянется и не станет слишком узким.
contain. Помещает изображение внутрь блока, сохраняет пропорции.

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

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

Существует более простой метод задать значения всех свойств для работы с задним фоном в одном объявлении, используя универсальное свойство background.

Свойство background имеет следующий синтаксис:

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

Где значения соответствуют вышерассмотренным нами свойствам:

background-color (color | transparent).
background-image (url | none).
background-position (значение).
background-size (auto | length | cover | contain).
background-repeat (repeat | repeat-x |repeat-y | no-repeat).
background-origin (padding-box | border-box | content-box).
background-clip (border-box | padding-box | content-box).
background-attachment (scroll | fixed | local).

Давайте рассмотрим пример использования универсального свойства background:

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

И так, что мы сделали в этом примере:

Мы установили для элементов <html> и <body> высоту 100%, убрали внутренние и внешние отступы.
Для элемента <header> задали минимальную высоту равную 34% от родительского элемента, ширину установили 100%. В качестве заднего фона установили изображение — url(‘cat_g.jpg’), позиционировали его по низу и масштабировали фоновое изображение под размеры элемента (center / contain — background-position / background-size). Без косой черты, как и без позиции фонового изображения работать не будет.
Для элемента <div> с классом .primer2 задали минимальную высоту равную 66% от родительского элемента, ширину установили 100%. В качестве заднего фона установили два различных изображения, позиционировали их по центру (center) и масштабировали их (первое изображение полностью помещается — значение contain, второе изображение масштабируется под размеры элемента cover ).

Результат нашей работы:

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

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

Подробное изучение позиционирования элементов будет освещено далее в учебнике в статье «Позиционирование элементов в CSS».

Цвет фона CSS

Не знаете как изменить цвет фона в html? Чтобы указать html цвет фона страницы сайта, используйте свойство background-color CSS. Оно используется так же, как и свойство color, другими словами, можно ввести название цвета, его шестнадцатеричное значение или RGB.

Чтобы указать цвета для фона веб-страницы, необходимо работать с html-тегом

<body>

Рассмотрите приведенный ниже код CSS:

/ * Мы работаем с тегом body, и соответственно со ВСЕЙ страницей * /
body
{
background-color: black; /* Фон страницы будет черным */
color: white; /* Текст страницы будет белым */
}

Результат работы этого кода простой html страницы с фоном:

Белый текст на черном фоне

Несколько фоновых изображений

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

body
{
background: url("sun.png") fixed no-repeat top right, url("snow.png") fixed;
}

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

Несколько фоновых изображений

Несколько фоновых изображений работают во всех браузерах кроме устаревших версий Internet Explorer, который распознает эту функцию, только начиная с версии 9 (IE9).

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

CSS Syntax

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

Note: If one of the properties in the shorthand declaration is the bg-size property,
you must use a / (slash) to separate it from the bg-position property, e.g. background:url(smiley.gif) 10px 20px/50px 50px;
will result in a background image, positioned 10 pixels from the left, 20 pixels from the top, and the size of the image will be 50 pixels wide and 50 pixels high.

Note: If using multiple background-image sources but also
want a background-color, the background-color parameter needs to be last in the
list.

Управление позицией фонового изображения

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

Значение	Описание
left topleft centerleft bottomright topright centerright bottomcenter topcenter centercenter bottom	Задает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Если вы указываете только одно ключевое слово, другое значение будет «center»
x% y%	Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0% 0% (это значение по умолчанию). В правом нижнем углу 100% 100%. Если указано только одно значение, то другое значение будет 50%.
x y	Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0 0. Значения могут быть в пикселях, или других единицах измерения CSS. Если указано только одно значение, то другое значение будет 50%. Вы можете совместно использовать проценты и единицы измерения.

Рассмотрим пример использования этого свойства:

<!DOCTYPE html>
<html>
<head>
	<title>Пример позиционирования фонового изображения</title>
<style> 
div {
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
background-image: url("smile_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-repeat: no-repeat; /**/
width: 100px; /* устанавливаем ширину элемента */
height: 100px; /* устанавливаем высоту элемента */
border: 1px solid; /* устанваливаем сплошную границу размером 1 пиксель */
margin: 10px; /* устанавливаем внешние отступы со всех сторон */
text-align: center; /* выравниваем текст по центру */
line-height: 60px; /* указываем высоту строки */
background-color: azure; /* задаем цвет заднего фона */
}
.leftTop {background-position: left top;} /* задаем позицию ключевыми словами */
.leftCenter {background-position: left center;} /* задаем позицию ключевыми словами */
.leftBottom {background-position: left bottom;} /* задаем позицию ключевыми словами */
.rightTop {background-position: right top;} /* задаем позицию ключевыми словами */
.rightCenter {background-position: right center;} /* задаем позицию ключевыми словами */
.rightBottom {background-position: right bottom;} /* задаем позицию ключевыми словами */
.centerTop {background-position: center top;} /* задаем позицию ключевыми словами */
.centerCenter {background-position: center center;} /* задаем позицию ключевыми словами */
.centerBottom {background-position: center bottom;} /* задаем позицию ключевыми словами */
.userPosition {background-position: 20px 75%;} /* задаем позицию по горизонтали в пикселях, а по вертикали в процентах */
</style>
</head>
	<body>
		<div class = "leftTop">left top</div>
		<div class = "leftCenter">left center</div>
		<div class = "leftBottom">left bottom</div>
		<div class = "rightTop">right top</div>
		<div class = "rightCenter">right center</div>
		<div class = "rightBottom">right bottom</div>
		<div class = "centerTop">center top</div>
		<div class = "centerCenter">center center</div>
		<div class = "centerBottom">center bottom</div>
		<div class = "userPosition">20px 75%</div>
	</body>
</html>

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

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

Рис. 117 Пример позиционирования фонового изображения.

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

CSS Multiple Backgrounds

CSS allows you to add multiple background images for an element, through the
property.

The different background images are separated by commas, and the images are
stacked on top of each other, where the first image is closest to the viewer.

The following example has two background images, the first image is a flower
(aligned to the bottom and right) and the second image is a paper background (aligned to the top-left corner):

#example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat;}

Multiple background images can be specified using either the individual
background properties (as above) or the shorthand property.

The following example uses the shorthand property (same result as
example above):

background-image

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

Например, картинка background.png хранится в той же папке, что и веб-страница, и вы хотите установить её как фон параграфам этого HTML-документа. Код будет таким:

p { background-image: url(background.png); }

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

Body { background-image: url(”image/background01.png”), url(”image/background02.png”), url(”image/background03.png”), url(”image/background04.png”); }

Очевидно, что без определённого позиционирования выбранные рисунки при отображении будут накладываться друг на друга, причём первое из перечисленных будет самым верхним, последнее — под всеми, задним фоном.

More Examples

Example

Sets two background images for the <body> element. Let the first
image appear only once (with no-repeat), and let the second image be repeated:

body { background-image: url(«img_tree.gif»), url(«paper.gif»);

background-repeat: no-repeat, repeat; background-color: #cccccc;}

Example

Use different background properties to create a «hero» image:

.hero-image { background-image: url(«photographer.jpg»); /* The
image used */ background-color: #cccccc; /* Used if the image is
unavailable */ height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */}

Example

Sets a linear-gradient (two colors) as a background image for a <div> element:

#grad1 { height: 200px; background-color: #cccccc; background-image:
linear-gradient(red, yellow);}

Example

Sets a linear-gradient (three colors) as a background image for a <div> element:

#grad1 { height: 200px; background-color: #cccccc; background-image:
linear-gradient(red, yellow, green);}

Example

The repeating-linear-gradient() function is used to repeat linear gradients:

#grad1 { height: 200px; background-color: #cccccc; background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);}

Example

Sets a radial-gradient (two colors) as a background image for a <div> element:

#grad1 { height: 200px; background-color: #cccccc; background-image:
radial-gradient(red, yellow);}

Example

Sets a radial-gradient (three colors) as a background image for a <div> element:

#grad1 { height: 200px; background-color: #cccccc; background-image:
radial-gradient(red, yellow, green);}

Example

The repeating-radial-gradient() function is used to repeat radial gradients:

#grad1 { height: 200px; background-color: #cccccc; background-image:
repeating-radial-gradient(red, yellow 10%, green 20%);}

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Объединение свойств

Можно получить тот же самый результат, что и в предыдущем примере, но с меньшим количеством строк кода. Для этого используется свойство background, которое позволяет установить значения свойств background-color, background-image, background-repeat, background-attachment, и background-position в объявлении всего одного свойства:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      body {
        background: white url('img_tree.png') no-repeat fixed right top;
        padding-right: 200px;
      }
    </style>
  </head>

  <body>

    <h1>Объединим свойства background в одно объявление!</h1>
    <p>Объединение нескольких свойств в одно может значительно сократить ваш CSS-код, 
    при этом никаких изменений во внешнем виде страницы не произойдет. Свойства, которые 
    возможно объединять в одно объявление, вы можете посмотреть в нашем справочнике по CSS.
	</p>

  </body>
</html>

Попробовать »

More Examples

Example

How to position a background-image to be centered at top:

body
{
background-image: url(‘w3css.gif’);

background-repeat: no-repeat;
background-attachment: fixed;

background-position: center top;
}

Example

How to position a background-image to be bottom right:

body
{

background-image: url(‘w3css.gif’);

background-repeat: no-repeat;

background-attachment: fixed;

background-position: bottom right;
}

Example

How to position a background-image using percent:

body
{
background-image: url(‘w3css.gif’);

background-repeat: no-repeat;

background-attachment: fixed;

background-position: 50% 50%;
}

Example

How to position a background-image using pixels:

body
{
background-image: url(‘w3css.gif’);

background-repeat: no-repeat;

background-attachment: fixed;
background-position: 50px 150px;
}

Example

Use different background properties to create a «hero» image: