CSS-Eigenschaft: background-image, Kategorien: Hintergründe (allgemein), Colors and Backgrounds (CSS 2.1), Backgrounds and Borders (CSS 3)
Hintergrundgrafik
Definiert eine Hintergrundgrafik für einen HTML-Bereich.
Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
---|---|---|---|---|
Hintergrundgrafik |
| none |
|
Verwandte Eigenschaften aus der Kategorie: Hintergründe (allgemein), Colors and Backgrounds (CSS 2.1), Backgrounds and Borders (CSS 3):
- background
- background-attachment
- background-clip
- background-color
- Aktuelle Seite: background-image
- background-origin
- background-position
- background-repeat
- background-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-color
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- box-shadow
- color
Folgendes ist beim Einsatz von background-image zu beachten:
- Ohne weitere Angaben wird die Hintergrundgrafik definiert, aber auch die Standardwerte für background-repeat, background-attachment und background-position gesetzt.
- Über background-position kann die Position der Grafik angegeben werden, entweder als absolute oder relative Angabe. Wird eine Hintergrundgrafik gekachelt, macht die Position nur bedingt Sinn, zielgerichtet ist die Kombination mit der Eigenschaften background-repeat.
- Die Wiederholung der Hintergrundgrafik ist über background-repeat einzustellen. Dabei hat man die Möglichkeit, die Grafik entweder gar nicht zu wiederholen, oder nur auf der X- oder der Y-Achse. Details sind unter background-repeat zu finden.
- Fehlerquelle ist gerne die relative Verlinkung der Grafik, die eingebunden werden soll. Liegt eine CSS-Datei selber nicht im gleichen Pfad wie die HTML-Datei, sondern in einem Unterordner (z.B. /lib/css/), ist die relative Verlinkung zum Ausgleichen des Pfads notwendig, also url('../../img/bg/demo.gif').
- Wichtig ist ebenfalls, dass zwischen dem Schlüsselwort url und den darauf folgenden () kein Leerzeichen ist, dies wird von den Browsern als Fehler erkannt, es kommt zu keiner Anzeige der Hintergrundgrafik.
- Die Grafik kann ohne, mit einfachen Anführungszeichen ' oder doppelten Anführungszeichen " angegeben werden. Aktuelle Browser stellen alle Notationen richtig dar. Aus Gründen der Abwärtskompatibilität empfiehlt es sich jedoch, die Angabe mit einer der Anführungszeichen anzugeben.
- Block-Elemente werden dabei bis zum Rand hinterlegt, das padding eines Elements wird mit gefüllt, das margin hingegen nicht, da diese außerhalb des Elements liegt.
- Inline-Elemente hinterlegen dabei nur den ausgespielten Text.
Firefox | Chrome | Internet Explorer | Safari | Opera |
|||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
CSS21 |
|
|
|
|
|
Weiterführende Informationen zu background-image:
- W3C Spezifikation:
http://www.w3.org/TR/css3-background/#background-image
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
background-color - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
background-origin
Beispiele
HTML:
<p>Ein Fließtext mit <strong>strong</strong>-Angabe. Ein Fließtext mit <strong>strong</strong>-Angabe. Ein Fließtext mit <strong>strong</strong>-Angabe.</p>
CSS:
p strong {
background-image: url('/img/ball.png');
}
Beispiel Nr. 1 So sieht's aus:
Ein Fließtext mit strong-Angabe. Ein Fließtext mit strong-Angabe. Ein Fließtext mit strong-Angabe.
HTML:
<div> </div>
CSS:
div {
background-image: url('/img/ball-blau.png');
height: 300px;
border: 1px solid black;
}
/* Die Anweisungen werden von Beispiel zu Beispiel vererbt. */
Beispiel Nr. 2 So sieht's aus:
HTML:
<div>
<div> </div>
</div>
CSS:
div div {
background-image: url('/img/ball.png');
width: 200px;
height: 200px;
margin: 40px;
}
Beispiel Nr. 3 So sieht's aus:
HTML:
<div>
<div>
<div> </div>
</div>
</div>
CSS:
div div div {
margin: 40px;
}
Beispiel Nr. 4 So sieht's aus:
HTML:
<div>
<div>
<div class="ohne"></div>
</div>
</div>
CSS:
div div div.ohne {
background-image: none;
border: 3px solid yellow;
}
/* Im DIV mit dem gelben Rahmen werden vererbte Hintergrundgrafiken hiermit zurück gesetzt. */
Beispiel Nr. 5 So sieht's aus:
HTML:
<div class="doNoQoute"></div>
CSS:
.doNoQoute {
background-image: url(img/css-wiki.png);
}
Beispiel Nr. 6 So sieht's aus:
HTML:
<div class="doDoupleQoute"></div>
CSS:
div.doDoupleQoute {
background-image: url("img/css-wiki.png");
}
Beispiel Nr. 7 So sieht's aus:
HTML:
<div class="doError"></div>
CSS:
div.doError {
background-image: url ("img/css-wiki.png");
}
/* Hier ist ein Leerzeichen zwischen url und der Bildangabe - es kommt zum Fehler, hier wird der Hintergrund aus Beispiel Nr. 2 geerbt. */
Beispiel Nr. 8 So sieht's aus:
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!