Свойство background-image

Задает фоновое изображение элемента

background-image: url("images/bg.jpg");
Chrome
Все
Edge
Все
FireFox
Все
IE
6+
iOS Safari
Все
Opera
Все
Safari
Все

Значения

background-image: none;

Убирает фоновое изображение у элемента

background-image: url("images/bg.jpg");

Относительный путь к фоновому изображению

background-image: url(https://placem.at/places?w=400&h=200&txt=0&random=1);

Абсолютный URL фонового изображения

<style>
.example-1 {
    height: 200px;
    background-image: url(https://placem.at/places?w=400&h=200&txt=0&random=1);
}
</style>
<div class="example-1"></div>
background-image: linear-gradient(45deg, #ccc, #949494);

Задает фоновый линейный градиент для элемента. Первый параметр - направление градиента в градусах (от -360 до 360) либо используя ключевые слова: to left, to bottom, to right, to top.

<style>
.example-2 {
    height: 200px;
    background-image: linear-gradient(45deg, #ccc, #949494);
}
</style>
<div class="example-2"></div>
background-image: radial-gradient(circle, #f16e12, #9c1717);

Задает фоновый радиальный градиент для элемента

<style>
.example-3 {
    height: 200px;
    background-image: radial-gradient(circle, #f16e12, #9c1717);
}
</style>
<div class="example-3"></div>
background-image: url(image1.png), url(image2.png);

Добавление нескольких фоновых изображений. Фоновые изображения перечисляются через запятую. Изображение, которое было объявлено раньше, будет выше остальных по оси Z.

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

<style>
.example-4 {
    height: 200px;
    background-image: 
        url(https://htmlbase.ru/storage/app/media/html5-css3.png),
        url(https://htmlbase.ru/storage/app/media/axiom-pattern.png);
    background-repeat: no-repeat, repeat;
    background-position: center;
}
</style>
<div class="example-4"></div>

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

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

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


Андрей
Изображения формата .png почему-то не отображаются этим свойством, а вот .jpg и .webp отображаются