Miten luoda: täyskorkea kuva

Opit, miten luoda täyskorkea taustakuva CSS:n avulla.

Täyskorkea kuva

Opit, miten luoda taustakuva, joka peittää koko selaimen ikkunan. Esimerkissä näytetään vastaanottavuus (ja puoliskon) responsiivinen taustakuva:

Esimerkki - täyskorkea taustakuva

Esimerkki - puoliskon taustakuva

Miten luoda täyskorkea kuva

Käytä konttiasetta ja lisää siihen korkeus 100%:n taustakuva.

Vinkki:Käyttämällä 50% voidaan luoda puoliskon taustakuva. Tämän jälkeen käytä seuraavia taustaparametreja kuvan täydelliseen keskittämiseen ja skaalaamiseen:

Huomioitavaa:Varmistaaksesi, että kuva peittää koko näytön, sinun täytyy myös asettaa height: 100% sovelletaan <html> ja <body>:

Sivun taustakuva:

body, html {
  height: 100%;
}
.bg {
  /* Käytetty kuva */
  background-image: url("dancer.jpg");
  /* Täyskorkea */
  height: 100%;
  /* Centreröi ja skaalaa kuvan hyvin */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Kokeile itse

Sivun puolikkaan taustakuvan:

.bg {
    height: 50%;
}

Kokeile itse