CSS: Задний фон на весь экран
Чтобы задать фоновое изображение на весь экран с помощью 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; }
Комментарии