Для того, чтобы задать фон блока картинкой в 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
, чтобы указать запасной цвет фона, если картинка не загрузится.