Чтобы задать фоновое изображение на весь экран с помощью CSS, нужно сделать следующее:
html, body {
height: 100%;
width: 100%;
}
body {
background-image: url('bg.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
В данном примере фоновое изображение находится в файле bg.jpg. Свойство background-size: cover масштабирует изображение, чтобы оно полностью покрыло элемент, свойство background-position: center центрирует его, а свойство background-repeat: no-repeat запрещает повторять изображение.
Обратите внимание, что в качестве элемента, к которому применяются стили фона, в данном случае используется элемент body. Если вы хотите установить фоновое изображение для другого элемента, например, для блока <div>, то нужно присвоить ему высоту и ширину в 100% и применить стили фона к нему:
.box {
height: 100%;
width: 100%;
background-image: url('bg.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
Комментарии
0Нашли ошибку или хотите дополнить материал?