Свойство background
Сокращенная запись для определения фона элемента. Включает в себя свойства: background-color, background-image, background-position, background-repeat, background-origin, background-attachment, background-size, background-clip. Необязательно указывать все значения и они могут быть указаны в любом порядке. Неуказанные значения будут установлены в значения по умолчанию.
background: #fff url("images/bg.jpg") center no-repeat;
Значения
background: #fff;
Можно использовать одно и более значений в любом порядке. Любые пропущенные значения будут использовать значения по умолчанию.
<style>
.example-1 {
height: 150px;
background: #6d78f7;
}
</style>
<div class="example-1"></div>background: #6e78f7 url("images/bg.jpg") no-repeat center;
Задает цвет фона #6e78f7, фоновое изображение, позицию фонового изображения по центру и без повторов по осям X, Y. Порядок значений не важен
<style>
.example-2 {
height: 100%;
background: #6e78f7 url(https://htmlbase.ru/storage/app/media/moto.jpg) no-repeat center;
}
</style>
<div class="example-2"></div>background: #fff url("images/bg.jpg") no-repeat center / cover;
Значение background-size должно идти после значения background-position и разделено слешем /
Обратите внимание! Не все браузеры поддерживают такой синтаксис, так что лучше определять background-size отдельно
<style>
.example-3 {
height: 100%;
background: #6e78f7 url(https://htmlbase.ru/storage/app/media/moto.jpg) no-repeat center / cover;
}
</style>
<div class="example-3"></div>