Использование CSS Background URL для создания потрясающего веб-дизайна

CSS свойство background-url используется для задания изображения в качестве фона элемента. Это может быть как единичное изображение, так и серия изображений, которые анимируются при наведении курсора (spriting).

Пример кода:

css
/* Задаем фоновое изображение для элемента по ссылке на файл */
.element {
  background-image: url('image.jpg');
}
/* Задаем фоновое изображение для элемента через относительный или абсолютный путь к файлу */
.element {
  background-image: url('/images/image.jpg');
}
/* Задаем фоновое изображение для элемента с использованием base64 кодирования */
.element {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AA...');
}
/* Задаем серию изображений для элемента с помощью наложения (background stack) */
.element {
  background-image: url('image1.jpg'), url('image2.jpg'), url('image3.jpg');
}
/* Анимация фона при наведении курсора (CSS Sprites) */
.element {
  width: 100px;
  height: 100px;
  background-image: url('sprites.png');
  background-position: 0 0;
  transition: background-position 0.5s;
}
.element:hover {
  background-position: -100px 0;
}

Таким образом, свойство background-url в CSS позволяет легко добавлять и стилизовать фоновые изображения для элементов на веб-странице, что позволяет создавать более интересный и привлекательный дизайн.