Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

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.

CSS-Eigenschaft: background-image
KurzbeschreibungWerteStandardwertKategorieHinweis
Hintergrundgrafik
  • <uri>
  • none
  • inherit
none
Allgemein:
Hintergründe
CSS 2.1:
Colors and Backgrounds
CSS 3:
Backgrounds and Borders
 

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.
Browserunterstützung von background-image
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu background-image:



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 nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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>&nbsp;</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 nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 2 So sieht's aus:

 
 

HTML:

<div>
   <div>&nbsp;</div>
</div>

CSS:

div div {
   background-image: url('img/ball.png');
   width: 200px;
   height: 200px;
   margin: 40px;
}
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 3 So sieht's aus:

 
 

HTML:

<div>
   <div>
      <div>&nbsp;</div>
   </div>
</div>

CSS:

div div div {
   margin: 40px;
 
}
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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 nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 5 So sieht's aus:

 

HTML:

<div class="doNoQoute"></div>

CSS:

.doNoQoute {
   background-image: url(img/css-wiki.png);
}
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

Beispiel Nr. 6 So sieht's aus:

 

HTML:

<div class="doDoupleQoute"></div>

CSS:

div.doDoupleQoute {
   background-image: url("img/css-wiki.png");
}
Beispiel nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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 nur für: FirefoxInternet ExplorerOperaSafariGoogle Chrome

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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 16. 10. 2017
Render Time: 0.132 sec.

Browser-Marktanteile