Подробно о свойстве CSS Background

background-color

Свойство background-color задает цвет фона для элемента. Это значение может быть любым принятым значением цвета, или (для прозрачного блока) ключевым словом transparent.

.left    { background-color: #ffdb3a; }
.middle  { background-color: #67b3dd; }
.right   { background-color: transparent; }

Цвет фона рисуется в области блочной модели, указанной в свойстве background-clip. Если также определяются какие-либо фоновые изображения, цветной слой распологается под ними.

В отличие от слоев изображений, которых может быть несколько, цветной слой может быть только один для элемента!

background-image

Свойство background-image определяет фоновое изображение (или изображения) для элемента. Это значение обычно представляет собой URL к картинке, определенный в url() нотации. Также может быть использовано значение none, которое будет учитываться в качестве слоя, но пустого.

.left    { background-image: url('ire.png'); }
.right   { background-image: none; }

Мы также можем указать несколько фоновых изображений, отделенных друг от друга запятой. Каждое последующее изображение будет помещается за предыдущим на Z-оси.

.middle {
    background-image: url('khaled.png'), url('ire.png');
    /* Other styles */
    background-repeat: no-repeat;
    background-size: 100px;
}

background-repeat

Свойство background-repeat управляет тем, как фоновое изображение заполняет пространство, после того как установлен его размер (при помощи свойства background-size (см. ниже)) и расположение (при помощи свойства background-position (см. ниже)).

Значение этого свойства может быть одним из следующих: repeat-x, repeat-y, repeat, space, round, no-repeat. Кроме первых двух (repeat-x и repeat-y), другие значения могут быть определены или один раз, для оси х и оси у, или для каждой оси по отдельности.

.top-outer-left  { background-repeat: repeat-x; }
.top-inner-left  { background-repeat: repeat-y; }
.top-inner-right { background-repeat: repeat; }
.top-outer-right { background-repeat: space; }

.bottom-outer-left  { background-repeat: round; }
.bottom-inner-left  { background-repeat: no-repeat; }
.bottom-inner-right { background-repeat: space repeat; }
.bottom-outer-right { background-repeat: round space; }

background-size

Свойство background-size определяет размер фонового изображения. Его значение может содержать ключевое слово, длину или процент.

Ключевые слова, доступные для этого свойства, это contain и cover. Ключевое слово contain будет масштабировать изображение с сохранением пропорций, до тех пор пока изображение целиком сможет поместиться в пределах области. cover будет масштабировать изображение до тех пор пока его высота или ширина сможет поместиться в пределах области.

.left {
	background-size: contain;
	background-image: url('ire.png');
	background-repeat: no-repeat;
}
.right { 
	background-size: cover;
	/*Остальные стили такие же как для класса as .left */
}

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

.left { 
	background-size: 50px; 
	/*Остальные стили такие же как для класса .left */ 
}
.right { 
	background-size: 50% 80%; 
	/*Остальные стили такие же как для класса .left */ 
}

background-attachment

Свойство background-attachment управляет тем, как фоновое изображение ведет себя при прокручивании страницы, относительно видимой области экрана и элемента. Оно имеет три возможных значения.

Ключевое слово fixed означает, что фоновое изображение фиксируется в видимой области экрана и не двигается, даже когда пользователь прокручивает прокручивает окна. local означает, что фон должен быть закреплен в своем положении в элементе. Если элемент имеет прокрутку и фоновое изображение позиционируется сверху, то при прокрутке элемента вниз, фоновое изображение останется на месте, вне области видимости. И, наконец, scroll означает, что фоновое изображение является фиксированным и не будет прокручиваеться вместе с содержанием элемента.

.left {
	background-attachment: fixed;
	background-size: 50%;
	background-image: url('ire.png');
	background-repeat: no-repeat;
	overflow: scroll;
}
.middle { 
	background-attachment: local; 
	/* Остальные стили такие же как для класса .left */ 
}
.right { 
	background-attachment: scroll; 
	/*Остальные стили такие же как для класса .left */ 
}

background-position

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

Доступны следующие ключевые слова top, right, bottom, left и center. Мы можем использовать эти ключевые слова в любой комбинации, и если указано только одно ключевое слово, то предполагается что другое равно center.

.top-left {
    background-position: top;
    background-size: 50%;
    background-image: url('ire.png');
    background-repeat: no-repeat;
}
.top-middle {
    background-position: right;
    /*Остальные стили такие же как для класса .top-left */
}
.top-right {
    background-position: bottom;
    /*Остальные стили такие же как для класса .top-left */
}
.bottom-left {
    background-position: left;
    /*Остальные стили такие же как для класса .top-left */
}
.bottom-right {
    background-position: center;
    /*Остальные стили такие же как для класса .top-left */
}

Для определения значений в единицах длины или процентах, мы можем указать положение вдоль оси х и у. Процентные значения устанавливаются по отношению к содержащему элементу.

.left {
    background-position: 20px 70px;
    /*Остальные стили такие же как для класса .top-left */
}
.right {
    background-position: 50%;
    /*Остальные стили такие же как для класса .top-left */
}

background-origin

Свойство background-origin определяет область позиционирования фонового изображения.

Доступные значения следующие:

• border-box – фон позиционируется относительно границы, при этом линия границы может перекрывать изображение,
• padding-box – фон позиционируется относительно края элемента с учетом толщины границы,
• content-box – фон позиционируется относительно содержимого элемента.

.left {
    background-origin: border-box;
    background-size: 50%;
    background-image: url('ire.png');
    background-repeat: no-repeat;
    background-position: top left;
    border: 10px dotted black;
    padding: 20px;
}
.middle {
    background-origin: padding-box;
    /*Остальные стили такие же как для класса .left*/
}
.right {
    background-origin: content-box;
    /*Остальные стили такие же как для класса .left*/
}

background-clip

Свойство background-clip определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах.

.left{
    background-clip: border-box;
    background-size: 50%;
    background-color: #ffdb3a;
    background-repeat: no-repeat;
    background-position: top left;
    border: 10px dotted black;
    padding: 20px;
}
.middle {
    background-clip: padding-box;
    /*Остальные стили такие же как для класса .left*/
}
.right {
    background-clip: content-box;
    /*Остальные стили такие же как для класса .left*/
}

background

И, наконец, свойство background является обобщающим для других свойств фона. Порядок подсвойств не имеет значения, так как типы данных для каждого свойства различны. Тем не менее, для background-origin и background-clip, если указано только одно значение, оно используется для обоих свойств. Если два, первое устанавливается для свойства background-origin.