Мой Справочник | CSS | Фон
| Свойство | Описание | Примеры | |
|---|---|---|---|
| background-color |
Цвет фона
|
background-color: red; |
|
background-color: #3498db; |
|||
background-color: rgb(50,100,150); |
|||
| background-image |
Фоновое изображение
на padding контейнера НЕ РЕАГИРУЕТ!!! |
background-image: url(../pict/phone.png);
|
|
| background-repeat |
Повтор фонового изображения
repeat - повтор по всем осям (по ум*) repeat-x - повтор по оси x repeat-y - повтор по оси y no-repeat - без повтора round - повтор по всей ширине и высоте блока space - фон повторяясь занимает все пространство |
background-image: url(../pict/phone.png);
background-repeat: repeat-x;
|
|
background-image: url(../pict/phone.png);
background-repeat: repeat-y;
|
|||
background-image: url(../pict/phone.png);
background-repeat: no-repeat;
|
|||
| background-position |
Позиция фонового изображения
По оси x, по оси y 0% = 0% 0% | left top - верх. лев. угол 50% = 50% 50% | center center - центр 100% = 100% 100% | right bottom - ниж. прав. угол 50px = 50px 50px - на 50px по обеим осям от лев. верх. 50px = 50px 150px - на 50px по x, на 150px по y от лев. верх. По ум* отчёт ведётся от лев. верх. угла, но можно изменить добавив перед значением top, right, bottom или left top 50px right 20px Если указывается в %-тах, то высчитывается проценты от ширины и высоты контейнера |
background-repeat: repeat-x;
background-position: 50%;
|
|
background-repeat: repeat-y;
background-position: center;
|
|||
background-repeat: no-repeat;
background-position: 50px;
|
|||
background-repeat: no-repeat;
background-position: right bottom;
|
|||
background-repeat: no-repeat;
background-position: right 30px bottom 10px;
|
|||
background-repeat: no-repeat;
background-position: left 30px top 15px;
|
|||
|
Если фоновое изображение не помещается в контейнер, оно будет обрезано, двигать его можно также с помощью background-position
СПРАЙТЫ!!! 
|
|||
| background-attachment |
Прокрутка фонового изображения
scroll - фон прокручивается вместе с содержимым (по ум*) fixed - фон не прокручивается, зафиксирован |
background-attachment: scroll;
|
|
background-image: url(bg.jpg);
|
Как здесь | ||
| background
(общая запись) |
background: [bc] [bi] [br] [bp] [ba];
[bc] — background-color [bi] — background-image [br] — background-repeat [bp] — background-position [ba] — background-attachment |
background: url(img\pict.png) no-repeat 50% 50% fixed;
|
Если какое-либо значение пропущено,
то будет стоять по ум* |
| background (несколько) |
Множественный фон
Можно создавать фон из нескольких картинок, перечисляя их и другие свойства background через запятую |
background-image:
|
|
| background-size |
Размер фонового изображения
10px(ширина) 50px(высота); Если указана только ширина, то высота будет пропорциональна; auto - по ум*; contain - отображается в контейнере макс. полностью, сохраняя пропорции; cover - растягивается по ширине блока, сохраняя пропорции; |
background-image: url(../pict/phone.png);
|
|
background-image: url(../pict/phone.png);
|
|||
background-image: url(../pict/phone.png);
|
|||
background-image: url(../pict/phone.png);
|
|||
background-image: url(../pict/phone.png);
|
|||
| background-origin |
Область отображения фонового изображения
(Взаимодействие padding, border и background-image) padding-box - по ум* (рамка "отодвигает" фон), на padding не реагирует; content-box - если задан padding, то фон реагирует на него и будет двигаться не от границы блока, а от внутренней границы border; border-box - фон "залезает" под border, на padding не реагирует; |
background-image: url(../pict/kitty_small.jpg);
|
|
background-image: url(../pict/kitty_small.jpg);
|
|||
background-image: url(../pict/kitty_small.jpg);
|
|||
| background-clip |
Обрезка фонового изображения
(Взаимодействие padding, border и background-image) border-box - по ум* (без обрезания); cotent-box - обрезает фон по краю содержимого (весь фон, который "не влез" в контейнер будет обрезан); padding-box - обрезает фон по внутреннему краю border (если фон "влез" в border как при background-origin: border-box, то край фона будет обрезан по рамке); |
background-image: url(../pict/kitty_small.jpg);
|
|
background-image: url(../pict/kitty_small.jpg);
|
|||
Адаптивный фон (viewport - высота хэдера)
height: -webkit-calc(100vh - 136px);