Hintergrund Bilder

Wir haben uns bereits die Möglichkeit angesehen, eine andere Hintergrundfarbe als die standardmäßig verwendete zu definieren, aber mit CSS können wir Bilder auch für den Hintergrund verwenden. Mit der Eigenschaft background-image und mehreren Hilfseigenschaften können wir diesen nützlichen Aspekt von CSS vollständig steuern.

Aber warum sollten Sie ein Hintergrundbild für ein Element verwenden, anstatt nur ein Bild über das HTML-Bild-Tag einzufügen? Diese Frage lässt sich leicht beantworten, da Sie mit CSS-Hintergrundbildern Inhalte über das Bild legen oder sogar ein Bild als Hintergrund für das gesamte Browserfenster verwenden können, während Sie nur einen festen Teil davon für Inhalte verwenden.

Im ersten Beispiel zeige ich Ihnen, wie einfach es ist, ein Hintergrundbild mit einem regulären div-Element zu verwenden:

<style type="text/css">
.box {
	background-image: url('http://css3-tutorial.net/images/blu_stripes.png');
	width: 200px;
	height: 100px;
	text-align: center;
	font-weight: bold;
	font-size: 2em;
}
</style>

<div class="box">
	Hello, world!
</div>

Der wesentliche Teil hierbei ist natürlich die Verwendung der Background-Image-Eigenschaft. Beachten Sie, wie der Wert dem Schlüsselwort url vorangestellt und dann in Klammern sowie in Anführungszeichen eingeschlossen wird. Die Anführungszeichen können im Prinzip weggelassen werden, werden jedoch benötigt, sobald Sie Leerzeichen im Pfad benötigen, sodass es normalerweise einfacher ist, sich nur die Gewohnheit zu machen, sie zu verwenden.

Die tatsächliche URL kann jede Art von Bild sein, die die gängigsten Webbrowser verwenden können. JPEG, PNG und GIF sind also naheliegend und werden sehr häufig verwendet.

Definieren einer Fallback-Hintergrundfarbe

Im obigen Beispiel verwenden wir ein Image, das auf diesem Server gehostet wird. Damit es jedoch überall funktioniert, habe ich den vollständigen Pfad angegeben. Sie sollten sich jedoch aus zwei guten Gründen niemals auf Images verlassen, die auf Servern außerhalb Ihrer Kontrolle gehostet werden: Sie werden die Tatsache, dass Sie ihre Bandbreite nutzen, nicht schätzen, und aus diesem Grund können sie die Image-Datei löschen oder umbenennen In diesem Fall sieht Ihre Website nicht wie vorgesehen aus.

Selbst wenn Sie das Bild auf Ihrem eigenen Server hosten, kann der Browser den Hintergrund erst dann anzeigen, wenn das Bild heruntergeladen wurde. Dies kann langsam sein, entweder weil Ihr Server stark unter Druck steht oder weil das Hintergrundbild sehr groß ist oder eine Kombination aus beiden. In der Zwischenzeit wird für Ihr Element kein Hintergrund angezeigt.

Tatsächlich ist dies nur dann der Fall, wenn für ein übergeordnetes Element kein Hintergrund angegeben wurde, da dieser Wert übernommen wird. Wenn Sie jedoch beispielsweise ein dunkles Hintergrundbild für Ihr Körperelement definiert haben, ist die Standardhintergrundfarbe wahrscheinlich Weiß. Dadurch wird der Übergang vom Standardhintergrund (in den meisten Browsern weiß) zu Ihrem Hintergrundbild (in diesem Fall ein dunkles Muster) etwas rauh, wenn der Browser Probleme hat, das Bild schnell genug abzurufen.

Aus diesem Grund kann es eine gute Idee sein, eine Hintergrundfarbe sowie ein Hintergrundbild anzugeben. Durch Angabe der Hintergrundfarbe vor dem Bild verwendet der Browser sofort die festgelegte Farbe und ersetzt sie dann durch das Bild, sobald der Browser sie abgerufen hat. Hier ist ein Beispiel:

<style type="text/css">
.box {
	background-color: #ebf1f3;
	background-image: url('http://css3-tutorial.net/images/blu_stripes.png');
	width: 200px;
	height: 150px;
	border: 1px solid black;
	text-align: center;
	font-weight: bold;
	font-size: 2em;
}
</style>

<div class="box">
	Hello, world!
</div>

In diesem Fall habe ich eine Hintergrundfarbe verwendet, die im tatsächlich verwendeten Hintergrund enthalten ist. Dadurch wird der Übergang so glatt wie möglich. Sie werden es wahrscheinlich nicht einmal sehen, aber wenn das Image größer, der Server ausgelastet oder der Benutzer eine langsame Verbindung hat, ist dies eine große Verbesserung. Dies hilft Ihnen auch in Situationen, in denen das Bild aus dem einen oder anderen Grund nicht geladen werden kann - es gibt Ihnen einfach mehr Kontrolle.

Zusammenfassung

In diesem Artikel haben wir gelernt, wie ein Bild als Hintergrund für ein Element verwendet wird. Denken Sie daran, dass Sie, obwohl wir in diesen Beispielen nur ein einfaches div-Element verwendet haben, das Hintergrundbild für so ziemlich jedes HTML-Element verwenden können, einschließlich des body-Elements!

Wir haben auch erfahren, dass es eine gute Idee ist, sowohl eine Hintergrundfarbe als auch ein Hintergrundbild in dieser Reihenfolge zu definieren. Die Hintergrundfarbe wird als Ersatzwert verwendet, falls das Bild nicht vorhanden ist oder der Browser Probleme hat, das Bild schnell genug abzurufen.

Wenn Sie das im ersten Beispiel verwendete Bild herunterladen, werden Sie feststellen, dass es nur 100 Pixel breit und 100 Pixel hoch ist, das Feld mit dem Hintergrund jedoch doppelt so breit ist. Warum füllt der Hintergrund also immer noch den gesamten Bereich aus? Das Geheimnis liegt in der Fähigkeit von CSS, einen Hintergrund zu wiederholen - in der Tat wird es dies standardmäßig tun. Dieses gesamte Konzept wird im nächsten Artikel ausführlich erörtert.