Фон и границы
Содержание:
- CSS Properties
- Property Values
- Фоновые изображения [background-image]
- More Examples
- Синтаксис
- Property Values
- Расположение фонового рисунка [background-position]
- CSS background — Shorthand property
- All CSS Background Properties
- Property Values
- CSS Reference
- CSS Properties
- All CSS Background Properties
- CSS Reference
- CSS Properties
- More Examples
- CSS Properties
- Блок . Свойство background-position
- CSS Reference
- CSS Properties
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-sizingcaption-sidecaret-color@charsetclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-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-widthobject-fitopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerighttab-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-wrapz-index
Property Values
Value | Description | Play it |
---|---|---|
left top left center left bottom right top right center right bottom center top center center center bottom |
If you only specify one keyword, the other value will be «center» | Play it » |
x% y% | The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. . Default value is: 0% 0% |
Play it » |
xpos ypos | The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions |
Play it » |
initial | Sets this property to its default value. Read about initial | Play it » |
inherit | Inherits this property from its parent element. Read about inherit |
Фоновые изображения [background-image]
CSS-свойство используется для вставки фонового
изображения.
Ниже мы используем в качестве фонового изображение бабочки. Вы можете
загрузить это изображение и использовать его на вашем компьютере (щёлкните
правой клавишей мыши на изображении и выберите «сохранить изображение как/save image as»),
либо вы можете использовать другое изображение.
Для вставки рисунка бабочки в качестве фонового изображения web-страницы
просто примените свойство background-image в тэге
и укажите местоположение рисунка.
Показать пример
NB: Обратите внимание, что мы специфицируем место, где находится файл как url(«butterfly.gif»). Это означает, что он находится в той же папке, что и таблица стилей
Вы,
разумеется, можете ссылаться и на файлы изображений в других папках, используя, например, url(«../images/butterfly.gif»), или
даже на файлы в Internet, указывая полный адрес файла : url(«http://www.html.net/butterfly.gif»).
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 */}
Синтаксис
Свойство указывается в виде одного или нескольких значений , разделённых запятыми.
(en-US). Позиция определяет координату x/y, чтобы разместить элемент относительно границ поля элемента. Она может быть определена с использованием одного и двух значений. Если используются два значения, первое значение предоставляет горизонтальную позицию, а второе представляет вертикальную позицию. Если указано только одно, второе значение считается .
Синтаксис 1-значения: значение может быть:
Значение ключевого слова , которое центрирует изображение.
Одно из значений ключевых слов , , , . Оно указывает край напротив, которого нужно поместить элемент. Затем для другого измерения устанавливается значение 50%, таким образом элемент размещается в середине указанного края.
или . Оно указывает координату X относительно левого края, с координатой Y установленной на 50%.
Синтаксис с 2-значениями: одно из значений определяет X, а другое определяет Y. Каждое значение может быть:
Одно из значений ключевых слов , , , . Если здесь указаны или , то оно определяет X, а другое заданное значение определяет Y. Если даны или , то оно определяет Y, а другое значение определяет X.
или . Если другое значение является или , то оно определяет Y, относительно верхнего края. Если другое значение или , то оно определяет X, относительно левого края
Если оба значения или , то первое определяет X, а второе Y.
Обратите внимание,что:
Если одно значение или , то другое значение не может быть или .
Если одно значение является или , то другое значение не может быть или .
Это означает, например, что и являются недействительные.
где
где
Property Values
Value | Description | CSS |
---|---|---|
background-color | Specifies the background color to be used | 1 |
background-image | Specifies ONE or MORE background images to be used | 1 |
background-position | Specifies the position of the background images | 1 |
background-size | Specifies the size of the background images | 3 |
background-repeat | Specifies how to repeat the background images | 1 |
background-origin | Specifies the positioning area of the background images | 3 |
background-clip | Specifies the painting area of the background images | 3 |
background-attachment | Specifies whether the background images are fixed or scrolls with the rest of the page | 1 |
initial | Sets this property to its default value. Read about initial | 3 |
inherit | Inherits this property from its parent element. Read about inherit | 2 |
Расположение фонового рисунка [background-position]
По умолчанию фоновый рисунок позиционируется в левом верхнем углу экрана.
Свойство позволяет изменять это значение по
умолчанию, и фоновый рисунок может располагаться в любом месте экрана.
Есть много способов установить значение . Тем
не менее, все они представляют собой набор координат.
Например, значение ‘100px 200px’ располагает фоновый рисунок на 100px слева и на 200px
сверху в окне браузера.
Координаты можно указывать в процентах ширины экрана, в фиксированных
единицах (пикселы, сантиметры, и т. п.), либо вы можете использовать слова top, bottom, center, left
и right. Модель ниже иллюстрирует сказанное:
В таблице дано несколько примеров.
Значение | Описание | Пример |
---|---|---|
Рисунок расположен на 2 cm слева и на 2 cm сверху |
Показать пример | |
Рисунок расположен по центру и на четверть экрана сверху |
Показать пример | |
Рисунок расположен в правом верхнем углу страницы |
Показать пример |
В примере кода фоновое изображение располагается в правом нижнем углу экрана:
Показать пример
CSS background — Shorthand property
To shorten the code, it is also possible to specify all the background properties in one
single property. This is called a shorthand property.
Instead of writing:
body { background-color: #ffffff; background-image:
url(«img_tree.png»); background-repeat: no-repeat;
background-position: right top;}
You can use the shorthand property :
Example
Use the shorthand property to set the background properties in one
declaration:
body { background: #ffffff url(«img_tree.png») no-repeat right top;}
When using the shorthand property the order of the property values is:
It does not matter if one of the property values is missing, as long as the
other ones are in this order. Note that we do not use the background-attachment property in the examples above, as it does not have a value.
All CSS Background Properties
Property | Description |
---|---|
background | Sets all the background properties in one declaration |
background-attachment | Sets whether a background image is fixed or scrolls with the rest of the page |
background-clip | Specifies the painting area of the background |
background-color | Sets the background color of an element |
background-image | Sets the background image for an element |
background-origin | Specifies where the background image(s) is/are positioned |
background-position | Sets the starting position of a background image |
background-repeat | Sets how a background image will be repeated |
background-size | Specifies the size of the background image(s) |
❮ Previous
Next ❯
Property Values
Value | Description | Play it |
---|---|---|
repeat | The background image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default |
Play it » |
repeat-x | The background image is repeated only horizontally | Play it » |
repeat-y | The background image is repeated only vertically | Play it » |
no-repeat | The background-image is not repeated. The image will only be shown once |
Play it » |
space | The background-image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images |
Play it » |
round | The background-image is repeated and squished or stretched to fill the space (no gaps) |
Play it » |
initial | Sets this property to its default value. Read about initial | Play it » |
inherit | Inherits this property from its parent element. Read about inherit |
CSS Reference
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
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
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
All CSS Background Properties
Property | Description |
---|---|
background | Sets all the background properties in one declaration |
background-attachment | Sets whether a background image is fixed or scrolls with the rest of the page |
background-clip | Specifies the painting area of the background |
background-color | Sets the background color of an element |
background-image | Sets the background image for an element |
background-origin | Specifies where the background image(s) is/are positioned |
background-position | Sets the starting position of a background image |
background-repeat | Sets how a background image will be repeated |
background-size | Specifies the size of the background image(s) |
❮ Previous
Next ❯
CSS Reference
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
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
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
More Examples
Example
Repeat a background image both vertically and horizontally (this is default):
body
{
background-image: url(«paper.gif»);
background-repeat: repeat;
}
Example
Repeat a background image only horizontally:
body
{
background-image: url(«paper.gif»);
background-repeat: repeat-x;
}
Example
Do not repeat a background image. The image will only be shown once:
body
{
background-image: url(«paper.gif»);
background-repeat: no-repeat;
}
Example
Using background-repeat: space and background-repeat: round:
#example2 { border: 2px solid black;
padding: 25px; background: url(«w3css.gif»);
background-repeat: space;}#example3 { border: 1px solid black;
padding: 25px;
background: url(«w3css.gif»); background-repeat: round;
}
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 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
Блок . Свойство background-position
Когда мы рассматривали свойство background-repeat,
я обращал ваше внимание на то, что по умолчанию фоновая картинка располагается
в левом верхнем углу. Однако, это поведение можно поменять с помощью
свойства background-position
Оно позволяет расположить фоновую картинку в любом удобном
нам месте элемента.
Данное свойство имеет два значения, которые пишутся через пробел:
сдвиг фона по горизонтали и сдвиг фона по вертикали. Собственно сдвиг можно задавать
ключевыми словами, а можно пикселями или процентами.
Сдвиг фона ключевыми словами
С помощью ключевых слов можно двигать фон по горизонтали и по вертикали,
но не в любое место, а в определенные позиции.
К примеру, по горизонтали фон можно поставить слева (значение left),
справа (значение right) и по центру (значение center),
а по вертикали — сверху (значение top), по центру (значение center) и снизу
(значение bottom).
Чтобы указать позицию фона, нужно написать, где он должен быть по горизонтали,
а где по вертикали.
К примеру, значение right bottom, поставит фон в правый нижний угол,
значение left bottom — в левый нижний угол, а значение left center —
поставит фон по центру слева. Если вы хотите поставить фоновую картинку
по центру всего блока — напишите center center. При этом можно
использовать сокращенный вариант — не писать слово center два раза,
а указать его один раз.
Давайте изучим следующие примеры, чтобы увидеть как это работает на практике.
Поставим для свойства background-position значение right bottom — правый нижний угол:
Так код будет выглядеть в браузере:
А теперь значение left bottom — левый нижний угол:
Так код будет выглядеть в браузере:
Значение center top — сверху по центру:
Так код будет выглядеть в браузере:
Значение center bottom — снизу по центру:
Так код будет выглядеть в браузере:
Значение right center — справа по центру:
Так код будет выглядеть в браузере:
Значение center center — по центру и по вертикали и по горизонтали
(напоминаю, что в этом случае можно написать одно слово center):
Так код будет выглядеть в браузере:
Сдвиг фона указанными значениями
С помощью ключевых слов можно поставить фоновую картинку
в ограниченное количество позиций. Если же вам нужно поставить фон
в какое-то другое место — нужно точно указать его позицию в пикселях
или в процентах.
Для этого значением background-position указывается два значения, при этом первое значение —
это сдвиг фона по горизонтали от левого края блока,
а второе значение — это сдвиг фона по вертикали от верхнего края блока.
Сдвинуть фон от другого края (например от правого или от нижнего)
обычными средствами невозможно, нужно исхитряться различными способами,
которые мы пока не будем трогать (тут скоро появится ссылка на описание подобных способов).
Давайте сдвинем фоновую картинку на 100px вправо, и на 30px вниз.
Для этого необходимо написать следующее значение — 100px 30px:
Так код будет выглядеть в браузере:
А теперь сдвинем фон вправо на 90% от ширины блока и вниз на 30px.
Для этого напишем 90% 30px:
Так код будет выглядеть в браузере:
Можно комбинировать значения и ключевые слова.
Сдвинем, к примеру, фон на 90% вправо, а по вертикали поставим по центру — 90% center:
Так код будет выглядеть в браузере:
Добавим repeat-y
Давайте теперь сделаем так, чтобы фоновая картинка повторялась, к примеру,
по оси Y (то есть по вертикали) и поставим получившуюся линию в правый верхний угол:
Так код будет выглядеть в браузере:
CSS Reference
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
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
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