Css свойство background-clip
Содержание:
Управление позицией фонового изображения
По умолчанию, фоновое изображение позиционируется в верхнем левом углу элемента, используя 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 Пример позиционирования фонового изображения.
Color, background-color и background-image
Давайте сначала посмотрим, как задается цвет Html элементов с помощью Css правила color. На самом деле тут все просто. Синтаксис совершенно обычный и цвет вы можете задавать в соответствии с тем, как это делали в языке гипертекстовой разметки. Как вы помните, цвета можно задавать с помощью шести цифр кода, поставленных после знака решетки (хеша — «#fe35a3»), либо с помощью трех цифр, если первая совпадает со значением второй, третья с четвертой, ну, а пятая, соответственно, с шестой (код цвета «#aa33ff» можно кратко записать как «a3f»).
Так же цвета в Html и Css коде можно будет представлять в виде слов (например, «red»), но чаще всего используется именно шестнадцатеричный код:
color:#303
Для примера я окрасил этот маленький абзац в тот цвет, который приведен выше (#303). Теперь он слегка отличается от цвета всех остальных абзацев (более темный), который задан как #555 в файле CSS используемой мною темы WordPress. Но задание цвета через color это довольно просто, а вот с фоном будет немного посложнее.
- background color — с помощью этого правила задается цвет фона для любого Html элемента. В нем можно использовать либо код, либо название оттенка, т.е. все в точности так, как и было при использовании color.
-
background image — с помощью него можно в качестве фона использовать картинку (но обязательно прочитайте про то, как уменьшить вес фотографии, ибо тяжелые картинки будут тормозить загрузку страниц), путь до которой будет указан в функционале url ().
Путь можно указывать в . Использование фоновой картинки вовсе не запрещает вам одновременно использовать заливку цветом с помощью background-color. Эти CSS правила не являются взаимоисключающими.
- background repeat — можно задать повторение картинки фона либо только по горизонтали в один ряд, либо только по вертикали, либо вообще запретить ее повторение.
- background position — позволяет точно задать позицию этого изображения как в процентах, так и в абсолютных величинах
- background attachment — позволяет выбрать тип привязки точки отсчета при позиционировании изображения для фона: либо относительно конкретного Html элемента, либо относительно области просмотра (видимой на экране компьютера области веб страницы).
Начнем с правила background-color — оно позволяет задать цвет фона для любого Html элемента, которому это правило будет адресовано с помощью селекторов в файле стилей (ну, или в котором оно может быть прописано с помощью ).
Если вы заглянете в спецификацию, то увидите, что по умолчанию цвет фона в любом элементе будет прозрачный (значение по умолчанию правила «background-color:transparent»). Правда, в элементах форм (select, input) он по умолчанию будет не прозрачным, т.к. это системные элементы и у них все по другому и отличается от обычных тегов языка гипертекстовой разметки.
Цвет в background-color задается стандартно (шесть или три цифры шестнадцатеричного кода, либо слово):
background-color:#FEFCDE
Например, фон этого абзаца задан именно через background-color с приведенным чуть выше кодом цвета.
Все остальные четыре CSS правила будут касаться только фоновой картинки, которую можно задать для любого Html элемента и, при желании, точно ее позиционировать. Какой именно графический файл будет использоваться, можно задать с помощью background-image.
Если вы посмотрите в спецификацию языка стилевой разметки, то увидите, что для background-image по умолчанию используется значение «none» (т.е. никакого изображения для фона не используется). Ну, а если это все-таки нужно, то в функционале url () вам потребуется указать до него путь:
background-image:url(https://ktonanovenkogo.ru/image/comment_top_focus.gif);
Например, для этого абзаца я использовал графический файл с фоном, путь до которого описан чуть выше. Видите, что вся область, отведенная под этот абзац, застилилась повторяющимся изображением, которое в оригинале имеет такой вид:
Т.е. при использовании только одного правила background-image с указанием пути до графического файла, это самое изображение будет размножено как по вертикали, так и по горизонтали до тех пор, пока не покроет собой всю область отводимую на веб странице под данный конкретный Html элемент (в нашем примере это был абзац). Почему так происходит?
CSS Tutorial
CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL
CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand
CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders
CSS Margins
Margins
Margin Collapse
CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset
CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow
CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand
CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive
CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples
CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar
CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity
Виды режимов смешивания
Для каждого режима используются математические расчёты, которые вычисляются в диапазоне от 0 до 1, где 0 соответствует чёрному цвету, 1 — белому. Все режимы смешивания можно разделить на следующие группы:
1) Нормальный режим — normal;
2) Режим контраста — overlay, soft-light, hard-light;
3) Режим затемнения — darken, multiply, color-burn;
4) Режим осветления — lighten, screen, color-dodge;
5) Режим сравнения — difference, exclusion;
6) Компонентный режим — hue, saturation, color, luminosity.
| background-blend-mode | |
|---|---|
| normal | Значение по умолчанию, которое указывает на отсутствие смешивания, так как верхний слой остаётся непрозрачным. |
| overlay | Режим перекрытия. Использует комбинацию режима наложения screen для более светлых пикселей, и режим наложения multiply для тёмных пикселей. Так как режим работает в среднем диапазоне этих двух режимов, то полутона (50% серого) становятся прозрачными. |
| soft-light | Режим мягкий свет. Использует комбинацию режима наложения screen для более светлых пикселей, и режим наложения multiply для тёмных пикселей. Похож на overlay, но придаёт более натуральный мягкий эффект, напоминающий сияние рассеянного светового пятна на фоне. Полутона также становятся прозрачными. |
| hard-light | Режим жёсткий свет. Цвета умножаются или осветляются, в зависимости от источника цвета. Эффект похож на сияние резкого светового пятна на фоне. Полутона также становятся прозрачными. |
| darken | Режим затемнения. Если пиксели верхнего слоя темнее, чем на нижележащих слоях, они сохраняются в изображении. Если пиксели в верхнем слое светлее, они заменяются на более тёмные пиксели нижнего слоя, поэтому в основном сохраняются темные тона всех слоёв. |
| multiply | Режим умножения. Работает путём умножения уровней яркости пикселов верхнего слоя с пикселами нижележащих слоёв. Отлично подходит для создания теней и удаления белых и других светлых тонов (сохраняя при этом более тёмные цвета). Умножение любого цвета на черный даёт черный. Умножение любого цвета на белый сохраняет оригинальный цвет. |
| color-burn | Режим «выжигания» основы. Заменяет цвета на противоположные, затемняя верхний слой, не меняя светлые (белые) оттенки. |
| lighten | Режим замены светлым. Тёмные пиксели верхнего слоя заменяются на светлые пиксели нижележащих слоёв. Светлые пиксели не заменяются. |
| screen | Режим экрана. Эффект аналогичен режиму lighten с отличием в том, что удаляет больше тёмных пикселей, создавая плавный переход. Работает как режим multiply, но удаляет тёмные тона. |
| color-dodge | Режим осветления основы. Насыщает светлые тона и блики. Темные области изображения остаются без изменений. |
| difference | Режим вычитания. Отображает тональную разницу между двумя слоями, удаляя белые пиксели из слоя. Результирующее изображение получается тёмным и противоположным по тону. Делает избирательную инверсию, при которой светлые цвета инвертируются в более тёмные и насыщенные, а тёмные остаются без изменения. |
| exclusion | Режим исключения. Сравнивает пиксел активного слоя и эквивалентный пиксел нижележащего слоя с учётом их яркости, делая избирательную инверсию. Черный никогда не инвертируется, белый — всегда. Одинаковые цвета компенсируют друг друга, давая серый цвет. Производит эффект, похожий на режим difference, но более мягкий. |
| hue | Режим цветового тона. Сохраняет оттенок активного слоя и добавляет ему яркость и насыщенность нижележащих слоев (получается изображение из нижнего слоя с цветами верхнего слоя). |
| saturation | Режим насыщенности. Создаёт цвет с насыщенностью исходного цвета и оттенком и яркостью нижележащего цветового фона. Серые оттенки остаются без изменений. |
| color | Режим цветности. Создаёт цвет с оттенком и насыщенностью исходного цвета и яркость нижележащего цветового фона. Сохраняет серые тона нижележащих слоёв. |
| luminosity | Режим яркости. Создаёт цвет с яркостью исходного цвета и оттенком и насыщенностью нижележащего цветового фона. Эффект противоположен режиму color. |
Рис. 4. Виды режимов смешивания
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-weightgridgrid-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-eventspositionquotesresizerightscroll-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 background-image — фоновая картинка на сайте
Свойство CSS background-image — позволяет установить фоновое изображение на сайте.
Синтаксис CSS background-image
Например, для установки общего (глобального) фона:
Например фоновая картинка:
После двоеточия указывается адрес изображения. Можно использовать как относительный так и прямой адрес.
В CSS3 можно задать несколько фоновых изображений (они как бы накладываются друг на друга как слои).
Задавая фон в виде картинки есть возможность настраивать так же ряд важных свойств CSS
- background-repeat
- background-attachment
- background-position
- background-size
- background-clip
Рассмотрим в отдельности эти параметры
4.1. CSS background-repeat
Свойство CSS background-repeat определяет повторять ли фон. Можно отдельно настраивать повторение по вертикали и горизонтали.
Синтаксис CSS background-repeat
Где value может принимать следующие значения:
- repeat-x — повторять фоновое изображение по горизонтали;
- repeat-y — повторять фоновое изображение по вертикали;
- no-repeat — не повторять фоновое изображение;
- repeat (по умолчанию) — повторять фоновое изображение по горизонтали и вертикали;
- space — все пространство заполняется максимально возможным количеством изображений, первое и последнее (по горизонтали и вертикали) поровну обрезаются;
- round — аналогично предыдущему, с тем отличием, что первое и последнее масштабируются для заполнения;
Например, по горизонтали не повторять, по вертикали повторять фоновое изображение:
4.2. CSS background-attachment
Свойство CSS background-attachment задает привязки фона изображения. Можно зафиксировать задний фон, чтобы при прокрутке скроллом он не крутится или же наоборот фон будет прокручиваться вместе с сайтом.
Синтаксис CSS background-attachment
Где value может принимать следующие значения:
- scroll (действует по умолчанию) — фон прокручивается вместе с сайтом;
- fixed — при прокрутке скролла фон остается неизменными;
- local — изображение прокручивается с контентом, но не с элементом, его содержащим;
Я думаю, что Вы видели такие сайты и понимаете о чем идет речь.
4.3. CSS background-position
Свойство CSS background-position задает расположение фона относительно левого верхнего угла.
Синтаксис CSS background-position
В параметрах мы указываем выравнивание (смещение) в пикселях или процентах сначала по оси Х, потом по оси У. value, value2 может принимать следующие значения:
- top — выравнивание по верхнему краю;
- left — выравнивание с левого края;
- right — выравнивание с правого края;
- bottom — выравнивание по нижнему краю;
- center — выравнивание по центру;
- число/проценты — можно задавать отступ в виде числа или процентов;
По умолчанию фон располагается в верхнем левом углу.
Можно указывать в пикселях Npx задание отступа от разных краев. Проще понять это на примере:
Фон будет выравнивать по правому краю со смещением 50 пикселей вниз.
Или например сместим фон на 100px вправо и расположим его по центру относительно высоты.
Все эти параметры можно задать в таблице стилей CSS. Этот параметр выравнивает расположение фона на странице.
4.4. CSS background-size
Свойство CSS background-size позволяет задавать размеры фона.
Синтаксис CSS background-size
Где первый параметр задает значение по оси Х, второй параметр по оси У. Можно задавать как в процентах, так и пикселях.
Так же может принимать два статичных параметра
- contain — масштабирует изображение по длинной стороне (заполняет все пространство)
- cover — масштабирует изображение по короткой стороне (заполняет все пространство)
Напоследок запишем все атрибуты вместе:
Для обращения к float из JavaScript нужно писать следующую конструкцию:
CSS Tutorial
CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL
CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand
CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders
CSS Margins
Margins
Margin Collapse
CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset
CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow
CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand
CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive
CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples
CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar
CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity
CSS Tutorial
CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL
CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand
CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders
CSS Margins
Margins
Margin Collapse
CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset
CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow
CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand
CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive
CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples
CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar
CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity
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:
.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 */}
Влияние каскадности на свойства
В первой части нашей книги, в уроке, посвященном каскадности CSS, мы говорили, что если в таблице стилей указано два одинаковых свойства для одного селектора, то предпочтение отдается тому свойству, которое находится ниже по списку. Сейчас пора вспомнить об этой особенности и подумать о том, как ведут себя свойства группы background, если к одному элементу их применяется несколько.
Допустим, мы написали следующий код:
background-color: blue; background: url(img/cat-transparent-bg.png) no-repeat;
Мы ожидаем увидеть изображение кота на синем фоне, но не тут-то было. Оказывается, второе свойство перезаписало первое значение на значение по умолчанию (т. е. на ). Решить проблему можно, поменяв местами строки:
background: url(img/cat-transparent-bg.png) no-repeat; background-color: blue;
А теперь мини-задача: если в последней строке этого кода заменить свойство на упрощенное свойство , как вы думаете, что произойдет с фоновым рисунком и значением ?
Background-repeat — повтор фоновой картинки
Следовательно, с помощью background-repeat мы сможем управлять повторениями фоновой картинки. У этого правила может быть только четыре значения:
- repeat — задает повтор картинки как по оси абсцисс (ось X, если еще не забыли школьный курс алгебры), так и по оси ординат (ось Y). Используется по умолчанию и указывать его специально в правиле не нужно
- repeat-x — она будет повторяться только по горизонтали и получится в результате только одна строка с повторами. Не забудьте, что правило background-repeat не будет работать, если вы не задали в background-image путь до фоновой картинки:
background-image:url(https://ktonanovenkogo.ru/image/rss_no_drop1.png); background-repeat:repeat-x;
- repeat-y — будет повторяться только по вертикали (получится один столбец из повторов):
- no-repeat — вообще не будет повторяться и мы получим одно единственное изображение в левом верхнем углу области того Html элемента, для которого оно используется:
