Как создать: полное изображение

Узнайте, как использовать CSS для создания полного фонового изображения.

Полное изображение

Узнайте, как создать фоновое изображение, которое покрывает весь браузер. В следующем примере показано полноразмерное (и полуполноразмерное) адаптивное фоновое изображение:

Демонстрация - полное фоновое изображение

Демонстрация - фоновое изображение на половину страницы

Как создать полноразмерное изображение

Используйте контейнерный элемент и добавьте в него фоновое изображение высотой 100%.

Совет:Использование 50% позволяет создать фоновое изображение на половину страницы. Затем используйте следующие свойства фона, чтобы идеально-centered и масштабировать изображение:

Внимание:Чтобы обеспечить покрытие изображения整个 экрана, вам также необходимо установить height: 100% применяется одновременно к <html> и <body>:

Полное фоновое изображение страницы:

body, html {
  height: 100%;
}
.bg {
  /* Используемое изображение */
  background-image: url("dancer.jpg");
  /* Полная высота */
  height: 100%;
  /* Центрирование и масштабирование изображения очень хорошо */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Попробуйте сами

Полосатое фоновое изображение:}

.bg {
    height: 50%;
}

Попробуйте сами