Как сделать - Изображение на всю страницу
Узнать, как создать полное фоновое изображение страницы с помощью CSS.
Изображение на всю страницу
Узнать, как создать фоновое изображение, которое покрывает все окно браузера. В следующем примере показано полноэкранное (и полуэкранное) адаптивное фоновое изображение:
Демо - Фоновое изображение на всю страницу
Демо - Фоновое изображение на половину страницы
Создать изображение на всю страницу
Используйте элемент контейнера и добавьте фоновое изображение в контейнер с помощью height: 100%
.Совет: Используйте 50% для создания фонового изображения на полстраницы. Затем используйте следующие свойства фона, чтобы центрировать и масштабировать изображение идеально:
Примечание: Чтобы убедиться, что изображение занимает весь экран, необходимо также применить height: 100%
как <html> и <body>:
Пример
body, html {
height: 100%;
}
.bg {
/* Используемое изображение */
background-image: url("img_girl.jpg");
/* Полный рост */
height: 100%;
/* Центр и масштабирование изображения */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Редактор кода »Половина страницы фонового изображения: