CSS Стили
  • !important
  • ::-ms-browse
  • ::-ms-check
  • ::-ms-clear
  • ::-ms-expand
  • ::-ms-fill
  • ::-ms-reveal
  • ::-ms-value
  • ::after
  • ::before
  • ::first-letter
  • ::first-line
  • ::placeholder
  • ::selection
  • :active
  • :checked
  • :default
  • :disabled
  • :empty
  • :enabled
  • :first-child
  • :first-of-type
  • :focus
  • :fullscreen
  • :hover
  • :in-range
  • :indeterminate
  • :invalid
  • :lang
  • :last-child
  • :last-of-type
  • :link
  • :not
  • :nth-child
  • :nth-last-child
  • :nth-of-type
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :read-only
  • :root
  • :target
  • :valid
  • :visited
  • @charset
  • @font-face
  • @document
  • @import
  • @keyframes
  • @media
  • @page
  • @viewport
  • 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-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-left
  • border-left-color
  • border-left-width
  • border-radius
  • border-right
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-spacing
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • bottom
  • border-top-right-radius
  • box-shadow
  • box-sizing
  • caption-side
  • clear
  • clip
  • 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
    • Alpha
    • BasicImage
    • Blur
    • Chroma
    • DropShadow
    • Emboss
    • Engrave
    • Glow
    • Gradient
    • ICMFilter
    • Light
    • MaskFilter
    • Matrix
    • MotionBlur
    • Shadow
    • Wave
  • flex-basis
  • flex-direction
  • float
  • font-family
  • font-size
  • font-stretch
  • font-style
  • font-variant
  • font-weight
  • height
  • hyphens
  • image-rendering
  • 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
  • marks
  • max-height
  • max-width
  • min-height
  • min-width
  • object-fit
  • opacity
  • orient
  • orphans
  • 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
  • position
  • quotes
  • resize
  • right
  • tab-size
  • table-layout
  • text-align
  • text-align-last
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-indent
  • 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
  • widows
  • width
  • word-break
  • word-spacing
  • word-wrap
  • writing-mode
  • z-index

CSS стиль background

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

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

Internet Explorer Chrome Opera Safari Firefox
4 (CSS 2.1) 9 (CSS 3) 1 10.5 1.3 3.6
Android Firefox Mobile Opera Mobile Safari Mobile
2.1 1 10 3.2

Краткая информация по CSS-свойству background

Значение по умолчаниюtransparent none repeat scroll 0% 0%
НаследуетсяНет
ПрименяетсяКо всем элементам

Правила написания свойства background

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

background: [<фон>, ] <последний_фон>

Здесь <фон> и <последний_фон> представляют собой набор значений CSS свойств background-attachment, background-image, background-position, background-repeat разделенные пробелом. Если помимо фоновых изображений требуется указать цвет фона элемента, то его записывают в самом конце.

Объектная модель

Объект.style.background

Пример применения стиля background

Проиллюстрируем работу background на примере. Фон нашей страницы будет состоять из 2х картинок, расположенных по бокам слева и справа:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример с background</title>
  <style>
   body {
    /* Характеристики фона */
    background: url(fon-left.png) left repeat-y, 
                url(fon-right.png) right repeat-y #fff899;

   }
  </style>
</head>
<body></body>
</html>
Применение свойства background
Применение свойства background с несколькими фоновыми изображениям
Популярные статьи
2D игра на Unity. Подробное руководство. Часть 1
  • unity
2D игра на Unity. Подробное руководство. Часть 1
Адаптивный слайдер без Javascript на CSS3
  • слайдер
Адаптивный слайдер без Javascript на CSS3
Работа с Unity в 2D
  • unity
Работа с Unity в 2D
2D игра на Unity. Подробное руководство. Часть 3
  • unity
2D игра на Unity. Подробное руководство. Часть 3
2D игра на Unity. Подробное руководство. Часть 4
  • unity
2D игра на Unity. Подробное руководство. Часть 4
2D игра на Unity. Подробное руководство. Часть 5
  • unity
2D игра на Unity. Подробное руководство. Часть 5
2D игра на Unity. Подробное руководство. Часть 6
  • unity
2D игра на Unity. Подробное руководство. Часть 6
Учебник по новому GUI в Unity. Часть 2.
  • unity
Учебник по новому GUI в Unity. Часть 2.
Учебник по новому GUI в Unity. Часть 1.
  • unity
Учебник по новому GUI в Unity. Часть 1.

HTML LESS LESS React
Онлайн журнал для профессиональных веб-дизайнеров и программистов
БлогПлагиныГрафикаИнструменты
© 2009-2017 WebSketches.ru