Как сделать фон блока картинкой css

Для того, чтобы задать фон блока картинкой в CSS можно использовать свойство background-image. При этом обязательно нужно установить размеры блока (высоту и/или ширину), чтобы картинка была видна.

Например, чтобы задать картинку в качестве фона блока <div>, нужно написать следующий CSS код:

div {
  background-image: url('img/background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  height: 300px;
  /* задаем высоту блока, чтобы была видна картинка */
}

В этом примере мы используем картинку background.jpg по адресу img/background.jpg, которая должна лежать в папке img рядом с файлом CSS. Свойство background-repeat: no-repeat указывает, что картинка не должна повторяться, background-size: cover сжимает или растягивает картинку, чтобы она полностью покрыла блок <div>.

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

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как сделать фон блока картинкой css

Наш специалист свяжется с вами в ближайшее время и уточнит детали