Background-Size

Größe des Hintergrunds exakt festgelegt

Contain

Cover

CSS-Code für die Hintergründe

Ändert die Breite des Browser-Fensters und schaut Euch auch den Source-Code an!


      div {
  background-image: url(P1010613_spatzen_gross_HG.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.groessenAngabe {
  /* durch "auto" bleiben wieder die Proportionen erhalten! */
  background-size: 50% auto;
}
.contain {
  /* der Browser stellt immer das gesammte Bild dar */
  background-size: contain;
}
.cover {
  /* der Browser füllt die gesamte Fläche aus – teilweise sind dann Teile des Bildes nicht mehr sichtbar */
  background-size: cover;
}