Jak to zrobić — pełny obraz strony
Dowiedz się, jak utworzyć pełny obraz tła strony za pomocą CSS.
Obraz całej strony
Dowiedz się, jak utworzyć obraz tła, który obejmuje całe okno przeglądarki. Poniższy przykład pokazuje responsywny obraz tła na pełnym ekranie (i półekranu):
Demo — obraz tła na połowie strony
Jak stworzyć obraz o pełnej wysokości
Użyj elementu kontenera i dodaj obraz tła do kontenera za pomocą height: 100%
.
Wskazówka: Użyj 50%, aby utworzyć obraz tła na połowie strony. Następnie użyj następujących właściwości tła, aby idealnie wyśrodkować i przeskalować obraz:
Uwaga: Aby mieć pewność, że obraz zajmuje cały ekran, musisz również zastosować height: 100%
zarówno do <html>, jak i <body>:
Przykład
body, html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
Obraz tła na połowie strony:
Przykład
.bg {
height: 50%;
}