Как сделать картинку фоном в css

Узнайте, как использовать различные способы установки изображений в качестве фона в CSS, включая простые свойства, такие как background-image, background-position и background-size. Получите примеры кода, чтобы начать использовать изображения в фоне вашего веб-сайта.

Как сделать картинку фоном в css

Чтобы сделать картинку фоном в CSS, необходимо использовать свойство background-image. Свойство принимает значение URL, указывающие на картинку, которую необходимо использовать в качестве фона. Например, если вы хотите использовать картинку example.jpg в качестве фона, ваш код будет выглядеть следующим образом:

.example {
  background-image: url('example.jpg');
}

Свойство background-image принимает множество других значений, помимо просто URL. Например, вы можете задать повторение фоновой картинки, используя следующий код:

.example {
  background-image: url('example.jpg');
  background-repeat: repeat-x;
}

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

.example {
  background-image: url('example.jpg');
  background-attachment: fixed;
}

И так далее. Вы можете применять другие свойства и значения для изменения поведения вашей фоновой картинки. Для получения дополнительных информаций просмотрите документацию по свойству background-image, чтобы узнать больше.