Продолжаем говорить про свойство background.
- Background-position-задает начальное положение фонового изображения, где первое значение (проценты, px, слово) определяет расположение по горизонтали, второе - вертикали.
CSS код
.block{
background-image: url('img/background/avatar.jpg');background-repeat: no-repeat;background-position: 0 0;
}
или так
.block{
background: url('img/background/avatar.jpg') top left no-repeat;
}
Можно и так
.block{
background: url('img/background/avatar.jpg') 0 0 no-repeat;
}
Размещение по центру элемента
CSS код
.block{
background-image: url('img/background/avatar.jpg');background-repeat: no-repeat;background-position: 50% 50%;
}
или так
.block{
background: url('img/background/avatar.jpg') center no-repeat;
}
можно итак
.block{
background: url('img/background/avatar.jpg') 50% no-repeat;
}
Размещение слева
CSS код
.block{
background-image: url('img/background/avatar.jpg');background-repeat: no-repeat;background-position: 0 50%;
}
или так
.block{
background: url('img/background/avatar.jpg') left no-repeat;
}
можно и так
.block{
background: url('img/background/avatar.jpg') 0 50% no-repeat;
}
Размещение в углу
CSS код
.block{
background-image: url('img/background/avatar.jpg');background-repeat: no-repeat;background-position: 100% 100%;
}
или так
.block{
background: url('img/background/avatar.jpg') bottom right no-repeat;
}
можно и так
.block{
background: url('img/background/avatar.jpg') 100% 100% no-repeat;
}
Позиция- делает отступ сверху, снизу и слева и справа.
CSS код
.block{
background-image: url('img/background/avatar.jpg');background-repeat: no-repeat;background-position: 25px 30px;
}
или так
.block{
background: url('img/background/avatar.jpg') 25px 30px no-repeat;
}
- Background-attachment-Устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента.
По умолчанию-позволяет перемещаться фону вместе с окном браузера.
CSS код
.block{
background-image: url('img/background/bg.jpg');background-repeat: no-repeat;background-position: 0 0;background-attachment: scroll;
}
или так
.block{
background: url('img/background/bg.jpg') 0 0 no-repeat scroll;
}
Fixed-делает фоновое изображение элемента неподвижным, а так же устанавливает фоновое изображение относительно окна браузера.
CSS код
.block{
background-image: url('img/background/bg.jpg');background-repeat: no-repeat;background-position: 0 0;background-attachment: fixed;
}
или так
.block{
background: url('img/background/bg.jpg') 0 0 no-repeat fixed;
}
Local-фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остаётся на месте.
CSS код
.block{
background-image: url('img/background/bg.jpg');background-repeat: no-repeat;background-position: 0 0;background-attachment: local;
}
или так
.block{
background: url('img/background/bg.jpg') 0 0 no-repeat local;
}
- Background-size-Масштабирует фоновое изображение согласно заданным размерам. В цифрах, где первое значение (проценты, px) определяет ширину, второе - высоту. Либо специальным значением.
Размеры картинки по умолчанию
CSS код
.block{
background-image: url('img/background/bg.jpg');background-position: 0 0;background-repeat: no-repeat;background-size: auto auto;
}
или так
.block{
background: url('img/background/bg.jpg') 0 0/auto auto no-repeat;
}
Размеры картинки по ширине блока
CSS код
.block{
background-image: url('img/background/bg.jpg');background-position: 0 0;background-repeat: no-repeat;background-size: 100% auto;
}
или так
.block{
background: url('img/background/bg.jpg') 0 0/100% auto no-repeat;
}
Размеры картинки по высоте блока
CSS код
.block{
background-image: url('img/background/bg.jpg');background-position: 0 0;background-repeat: no-repeat;background-size: auto 100%;
}
или так
.block{
background: url('img/background/bg.jpg') 0 0/auto 100% no-repeat;
}
Расстягиваем картинку на всю ширину и высоту блока
CSS код
.block{
background-image: url('img/background/bg.jpg');background-position: 0 0;background-repeat: no-repeat;background-size: 100% 100%;
}
или так
.block{
background: url('img/background/bg.jpg') 0 0/100% 100% no-repeat;
}
Contain-масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока. То есть по меньшей стороне картинки.
CSS код
.block{
background-image: url('img/background/bg.jpg');background-position: 0 0;background-repeat: no-repeat;background-size: contain;
}
или так
.block{
background: url('img/background/bg.jpg') 0 0/contain no-repeat;
}
Cover-масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. То есть по большей стороне картинки.
CSS код
.block{
background-image: url('img/background/bg.jpg');background-position: 0 0;background-repeat: no-repeat;background-size: cover;
}
или так
.block{
background: url('img/background/bg.jpg') 0 0/cover no-repeat;
}
Размеры-устанавливаем конкретные размеры. Если установлено одно значение, оно задает ширину фона, второе значение принимается за auto. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задает ширину и высоту фоновой картинки
CSS код
.block{
background-image: url('img/background/bg.jpg');background-position: 0 0;background-repeat: no-repeat;background-size: 200px 150px;
}
или так
.block{
background: url('img/background/bg.jpg') 0 0/200px 150px no-repeat;
}
Установка нескольких фоновых изображений для блока-свойство background позволяет задать несколько фоновых изображений одному блоку, причем со своими настройками позиционирования масштабирования и прокрутки. Указывать значения следует через запятую.
Одна картинка + цвет
CSS код
.block{
background-color: # 18b5a4;background-image: url('img/background/bg.jpg');background-repeat: no-repeat;
}
или так
.block{
background: # 18b5a4 url('img/background/avatar.jpg') no-repeat;
}
Две картинки-у каждой свои настройки. Каждая следующая ложится под предыдущую
CSS код
.block{
background-image: url('img/background/avatar_3.jpg'),url('img/background/bg.jpg');background-repeat: no-repeat;background-position: left,50%;background-size: auto auto, cover;
}
или так
.block{
background: url('img/background/avatar_3.jpg') left no-repeat, url('img/background/bg.jpg') 50%/cover no-repeat;
}
Три картинки, у каждой свои настройки. Каждая следующая ложится под предыдущую.
CSS код
.block{
background-image: url('img/background/avatar_2.jpg'), url('img/background/avatar_3.jpg'),url('img/background/bg.jpg');background-repeat: no-repeat;background-position: right, left, 50%;background-size: 50px, auto auto, cover;
}
или так
.block{
background: url('img/background/avatar_2.jpg') right/50px no-repeat, url('img/background/avatar_3.jpg') left no-repeat, url('img/background/bg.jpg') 50%/cover no-repeat;
}
Четыре картинки, у каждой свои настройки. Каждая следующая ложится под предыдущую.
CSS код
.block{
background-image: url('img/background/avatar.jpg'), url('img/background/avatar_2.jpg'), url('img/background/avatar_3.jpg'),url('img/background/bg.jpg');background-repeat: no-repeat;background-position:0 0, 100% 100%, 50%, 50%;background-size: 50px, 50px, auto auto, cover;
}
или так
.block{
background: url('img/background/avatar.jpg') 0 0/50px no-repeat, url('img/background/avatar_2.jpg') 100% 100%/50px no-repeat, url('img/background/avatar_3.jpg') 50% no-repeat, url('img/background/bg.jpg') 50%/cover no-repeat;
}
- Существуют еще пара свойств таких как background-origin и background-clip, которые отвечают за показ фона вместе с границей border. На эти свойства влияет параметр box-sizing: border-box; в нашем обнуляющем стиле.
Ну на этом мы закончим говорить о свойстве background. Тема не очь сложная если почитать и применить это на деле.