Свойство 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;
Chrome
Все
Edge
Все
FireFox
Все
IE
6+
iOS Safari
Все
Opera
Все
Safari
Все

Значения

background: #fff;

Можно использовать одно и более значений в любом порядке. Любые пропущенные значения будут использовать значения по умолчанию.

<style>
.example-1 {
    height: 150px;
    background: #6d78f7;
}
</style>
<div class="example-1"></div>
background: #6e78f7 url("images/bg.jpg") center no-repeat;

Задает цвет фона #6e78f7, фоновое изображение, позицию фонового изображения по центру и без повторов по осям X, Y.

<style>
.example-2 {
    height: 100%;
    background: #6e78f7 url(https://placem.at/places?w=300&h=100&txt=0&random=4) center no-repeat;
}
</style>
<div class="example-2"></div>
background: #fff url("images/bg.jpg") center / cover;

Значение background-size должно идти после значения background-position и разделено слешем /

Обратите внимание! Не все браузеры поддерживают такой синтаксис, так что лучше определять background-size отдельно

<style>
.example-3 {
    height: 100%;
    background: #6e78f7 url(https://placem.at/places?w=400&h=150&txt=0&random=4) center no-repeat / cover;
}
</style>
<div class="example-3"></div>

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии