Свойство background-image
Задает фоновое изображение элемента
background-image: url("images/bg.jpg");
Значения
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)
Войдите или зарегистрируйтесь для того чтобы оставлять комментарии