Hier eine kurze Anleitung, wie man Headerbilder im Responsive Webdesign mit css konfiguiert
(1) background-size: auto 100%
Diese Eigenschaft kann verschiedene Werte annehmen. Für Responsive sind besonders auto und 100% relevant. z.B: „background-size: 100% auto“. Mit dieser Einstellung passt sich der Header in der Höhe automatisch an. Wenn zu wenig Platz in der Breite ist, werden die Ränder abgeschnitten
(2) background-position: center center
Über die „background-position: center center“ lässt sich das Background image horizontal und vertikal positionieren. In Kombination mit background-size lassen sich Headerbilder hier auf den mittleren Ausschnitt des Motives bündeln. Auf Smartpones ist der Viewport zu klein und der linke und rechte Rand wird abgeschnitten. Je nach Layout sind natürlich auch andere Variationen möglich.
(3) background-color: #Hexcode
Dieses Attribut ist nötig, damit auf sehr breiten Bildschirmen ein zum Bild und der restlichen Website passendende Hintergrundfarbe angezeigt wird
(4) background-repeat: no-repeat
Diese Wert verhindert, dass das Headerbild nebeneinander angezeigt wird. Dies ist der Fall, wenn man einen breiten Bildschirm hat.
Hier der komplette Code:
background:url(„…./bannerImg.gif“);
background-position:center center;
background-color:blue;
background-repeat:no-repeat;
background-size:auto 100%;