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;
}