Jak utworzyć: Pełnostronicowy obraz

Naucz się, jak używać CSS do tworzenia pełnostronicowego obrazu tła.

Pełnostronicowy obraz

Naucz się, jak utworzyć tło obrazu pokrywające całe okno przeglądarki. Poniższy przykład pokazuje pełnoekranowy (i połowa ekranu) responsywny obraz tła:

Pokaz - Pełnostronicowy obraz tła

Pokaz - Połowiczny obraz tła

Jak utworzyć pełnostronicowy obraz

Użyj elementu kontenera i dodaj do niego obraz tła o wysokości 100%.

Wskazówka：Użycie 50% może utworzyć połowę strony tła obrazu. Następnie użyj następujących właściwości tła, aby idealnie centralizować i skalować obraz:

Uwaga：Aby upewnić się, że obraz pokrywa całą ekran, musisz również ustawić height: 100% jest stosowany do <html> i <body>:

Pełnostronicowy obraz tła：

body, html {
  height: 100%;
}
.bg {
  /* Używany obraz */
  background-image: url("dancer.jpg");
  /* Pełna wysokość */
  height: 100%;
  /* Świetnie centralizuje i skaluje obrazCentralizuje i skaluje obraz pięknie */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Spróbuj sam

Połowa strony tła obrazu:}

.bg {
    height: 50%;
}

Spróbuj sam