Hoe OM - Volbladbeeld
Leer hoe om 'n volledige bladsy agtergrondprent met CSS te skep.
Volle bladsy Beeld
Leer hoe om 'n agtergrondprent te skep wat die hele blaaiervenster dek. Die volgende voorbeeld toon 'n volskerm (en 'n halfskerm) reageer agtergrondprent:
Demo - Volle bladsy agtergrond beeld
Demo - Halfbladsy agtergrond beeld
Hoe om 'n volle hoogte beeld te skep
Gebruik 'n houerelement en voeg 'n agtergrondprent by die houer met height: 100%
.
Wenk: Gebruik 50% om 'n halwe bladsy agtergrondprent te skep. Gebruik dan die volgende agtergrondeienskappe om die prent perfek te sentreer en skaal:
Let wel: Om seker te maak dat die prent die hele skerm dek, moet jy ook height: 100%
op beide <html> en <body> aansoek doen:
Voorbeeld
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;
}
Halfbladsy agtergrondprent:
Voorbeeld
.bg {
height: 50%;
}