Форум мастеров

background-color

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
div {
  padding: 10px;
  background-color: transparent;
}

Краткая информация

Значение по умолчаниюtransparent
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяДа

Значения

См. цвет

transparent
Устанавливает прозрачный фон.
По умолчанию background имеет значение transparent. Частичную или полную прозрачность можно достичь с помощью функции RGBA. Рассмотрим зелёный цвет, который можно записать следующим образом.
div {
  background: transparentgreen#008000rgb(0,128,0)rgba(0,128,0,.7);
  height: 25em;
}

background-image

Помимо цвета используется и картинка. Если она меньше требуемой области, то изображение будет повторяться.
div {
  background: green noneurl(http://murka.lark.ru/files/css/B/images/background.jpg);
  height: 25em;
}
Подробнее про линейный градиент
Подробнее про радиальный градиент

background-repeat

Задаёт повторение рисунка по горизонтали, по вертикали или показывает картинку в одном экземпляре. space повторяет изображение без обрезания и изменения размера, round изменяет фото так, чтобы оно уместилось в контейнер целиком. space, round и no-repeat можно совмещать. Последние два значения не поддерживаются в Mozilla Firefox, Chrome и Safari.
div {
  background: green url(http://murka.lark.ru/files/css/B/images/background.jpg) repeatno-repeatrepeat-xrepeat-yspaceroundspace no-repeat;
  height: 25em;
}
Обязательно нужно указывать пробел после скобок, например, такая надпись не будет работать в IE.
background: #FFF url(адрес_изо)no-repeat;

background-position

Для позиционирования элемента, где первое значение (проценты, px и др.) определяет расположение по горизонтали, второе - вертикали.
div {
  background: green url(http://murka.lark.ru/files/css/B/images/background.jpg) no-repeat 0% 0%0% 50%50% 50%100% 0%100% 100%;
  height: 25em;
}

background-attachment

По умолчанию фон перемещается с прокруткой окна браузера (scroll). Можно зафиксировать его (fixed). Или позволить перемещаться с прокруткой содержимого блока (local).
div {
  background: #fff5d7 url(http://murka.lark.ru/files/css/B/images/romashki.jpg) no-repeat scrollfixed;
  height: 25em;
  overflow-y: scroll;  background-attachment: local;
}

background-clip

Определяет вид фоновой картинки под границами.
div {
  background: #fff5d7 url(http://murka.lark.ru/files/css/B/images/romashki.jpg) no-repeat;   background-clip: border-box;  background-clip: padding-box;  background-clip: content-box;  height: 25em;
  padding: 20px;
  border: 10px dashed #ABC;
}

background-origin

Фоновое изображение позиционируется относительно края элемента.
div {
  background: #fff5d7 url(http://murka.lark.ru/files/css/B/images/romashki.jpg) no-repeat;  background-origin: padding-box;  background-origin: border-box;  background-origin: content-box;  height: 25em;
  padding: 20px;
  border: 10px dashed #ABC;
}

background-size

Задаёт размер фоновой картинки элемента. В данном случае textarea, а значит, потянув за точки, составляющие треугольник, можно изменить его габариты. auto, contain и cover сохраняют соотношения высоты и ширины изображения, проценты изменяют площадь относительно занимаемого блока.
textarea {
  display: block;
  background: #fff5d7 url(http://murka.lark.ru/files/css/B/images/romashki.jpg) no-repeat;  background-size: 100% auto;  background-size: auto 100%;  background-size: contain;  background-size: cover;  background-size: 100% 100%;  background-size: 200px 154px;  background-size: auto;  width: 100%;
  height: 35em;
}

background-blend-mode

Управляет режимами смешивания слоев фона [w3.org]. Для каждого изображения или градиента можно прописать свой режим.
normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity
div {
  width: 189px;
  height: 220px;
  background: #fff5d7 url(http://murka.lark.ru/files/css/B/images/zayats.jpg);
  background-blend-mode: soft-light;
  transition: 1s linear;
}
div:hover {
  background-color: rgba(0,0,0,0);
}

Написание

Это равнозначное написание кода:

background-color: #7da716;
background-image: url(http://murka.lark.ru/files/css/B/images/smail-bolshoi-palets-vverh.gif);
background-repeat: no-repeat;
background-position: 50% 50%;

/* или */ 

background: #7da716 url(http://murka.lark.ru/files/css/B/images/smail-bolshoi-palets-vverh.gif) no-repeat 50% 50%;

Через запятую можно указывать значения для нескольких фоновых изображений

background-color: #7da716;
background-image: url(http://murka.lark.ru/files/css/B/images/background.jpg), url(http://murka.lark.ru/files/css/B/images/Logo-Blogger.png), url(http://murka.lark.ru/files/css/B/images/smail-bolshoi-palets-vverh.gif);
background-repeat: no-repeat;
background-position: 0% 0%, 100% 100%, 50% 50%;

/* или */ 

background:
 url(http://murka.lark.ru/files/css/B/images/background.jpg) no-repeat,
 url(http://murka.lark.ru/files/css/B/images/Logo-Blogger.png) 100% 100% no-repeat,
 url(http://murka.lark.ru/files/css/B/images/smail-bolshoi-palets-vverh.gif) 50% 50% no-repeat #7da716;

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !