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

CSS-Eigenschaft: background-origin, Kategorien: Hintergründe (allgemein), Backgrounds and Borders (CSS 3)

Positionierung der Hintergrundgrafik

Definiert, an welchem Bereich sich eine Hintergrundgrafik ausrichtet.

CSS-Eigenschaft: background-origin
KurzbeschreibungWerteStandardwertKategorieHinweis
Positionierung der Hintergrundgrafik
  • padding-box
  • border-box
  • content-box
padding-box
Allgemein:
Hintergründe
CSS 3:
Backgrounds and Borders
Neu in CSS 3
 

Folgendes ist beim Einsatz von background-origin zu beachten:

  • Hintergrundgrafiken »kacheln« sich ohne weitere Angaben von links oben zeilenweise nach rechts unten. Die erste Hintergrundgrafik liegt dabei in der linken oberen Ecke bündig am Rand der Box (Siehe Beispiel Nr. 1).
  • Ähnlich wie über die CSS-Eigenschaft background-position kann über background-origin die Startposition der ersten Hintergrundgrafik gesteuert werden. Im Gegensatz zur background-position wird keine konkrete Position in PX oder EM angegeben, sondern es werden die Dimensionen, die über padding und border definiert sind, zur Ausrichtung genutzt.
  • Vergleichbar mit background-clip kann die Hintergrundgrafik links oben hinter dem Rahmen (border), an der linken oberen Ecke des Innenabstands (padding) oder an der linken oberen Ecke des eigentlichen Inhaltsbereich positioniert werden.
  • Alle weiteren gekachelten Hintergrundgrafiken richten sich an der Positionierung der ersten positionierten Grafik aus.
  • Für eine Box können mehrere Hintergrundgrafiken angegeben werden, die über Kommas () voneinander getrennt werden. Über background-origin kann dann, ebenfalls über Kommas () getrennt, die Art der Positionierung für jede einzelne Grafik definiert werden. Im Beispiel Nr. 4 ist die Schreibweise zu sehen.
  • Falls mehrere Hintergrundgrafiken für eine Box definiert werden, werden diese bei Überlagerungen von vorne nach hinten dargestellt. Im Beispiel Nr. 5 sieht man, dass eine zweite definierte Grafik hinter der zuerst angegebenen Grafik liegt.
  • background-origin kann mit background-position kombiniert werden. Die Ausrichtung der Hintergrundgrafik, die durch background-origin definiert ist, wird dann um die Längen ergänzt, die über background-position angegeben sind. Im Beispiel Nr. 7 ist dies zu sehen.
Browserunterstützung von background-origin
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS3
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
nj
Version: 4Version: 5Version: 6Version: 7
-webkit-j
Version: 10Version: 11Version: 12
tj

Weiterführende Informationen zu background-origin:



Beispiele

HTML:

<div id="example-1">background-origin</div>

CSS:

#example-1 {
    background-image: url('img/css-wiki.png');     
    height: 100px;
    border: 10px dotted black;
    padding: 30px;
    background-repeat: no-repeat;
}
/* Ohne ausdrückliche Angabe von background-origin liegt eine einzelne Hintergrundgrafik links oben
in den Ausmaßen des Innenabstands der Box, nicht unter dem Rahmen. */

Beispiel Nr. 1 So sieht's aus:

background-origin
 

HTML:

<div id="example-2">background-origin</div>

CSS:

#example-2 {
    background-image: url('img/css-wiki.png');     
    height: 100px;
    border: 10px dotted black;
    padding: 30px;
    background-repeat:no-repeat;
    background-position: 0px 0px;
 
    background-origin: border-box;
}
/* border-box steuert, dass eine Hintergrundgrafik bereits hinter dem Rahmen beginnt. */

Beispiel Nr. 2 So sieht's aus:

background-origin
 

HTML:

<div id="example-3">background-origin</div>

CSS:

#example-3 {
    background-image: url('img/css-wiki.png');     
    height: 100px;
    border: 10px dotted black;
    padding: 30px;
    background-repeat:no-repeat;
    background-position: 0px 0px;
 
    background-origin: content-box;
}
/* content-box steuert, dass die Grafik am eigentlichen Inhalt ausgerichtet wird. */

Beispiel Nr. 3 So sieht's aus:

background-origin
 

HTML:

<div id="example-4">background-origin</div>

CSS:

#example-4 {
    background-image: url('img/css-wiki.png'),url('img/css-wiki.png'),url('img/css-wiki.png');     
    height: 100px;
    border: 10px dotted black;
    padding: 30px;
    background-repeat:no-repeat;
    background-position: 0% 0%, 100% 0% , 100% 100%;
 
    background-origin: content-box, border-box, padding-box;
}
/* Für eine Box können mehrere Hintergrundgrafiken definiert werden. 
Für jede einzelne kann die background-origin individuell definiert werden. 
In diesem Beispiel sind die Hintergrundgrafiken zusätzlich über background-position unterschiedlich positioniert. */

Beispiel Nr. 4 So sieht's aus:

background-origin
 

HTML:

<div id="example-5">background-origin</div>

CSS:

#example-5 {
    background-image: url('img/ball.png'),url('img/ball-blau.png');     
    height: 100px;
    border: 10px dotted black;
    padding: 30px;
    background-repeat:no-repeat;
 
    background-origin: content-box, padding-box;
}
/* Mehrere Hintergrundgrafiken werden von vorne nach hinten angeordnet. 
In diesem Beispiel ist zuerst die rote Kugel definiert, die sich am Inhalt selber ausrichtet, die blaue Kugel liegt dahinter und ist am Innenabstand ausgerichtet. */

Beispiel Nr. 5 So sieht's aus:

background-origin
 

HTML:

<div id="example-6">background-origin</div>

CSS:

#example-6 {
    background-image: url('img/ball-blau.png');     
    background-color: #00ff00;    
    height: 100px;
    border: 10px dotted black;
    padding: 30px;
 
    background-origin: content-box;
}
/* Hier ist die Kachelung nicht über no-repeat unterdrückt. 
Relevant für die Positionierung aller Kugeln ist die erste Hintergrundgrafik. Diese richtet sich hier am Inhalt selber aus (es ist die linke, vollständig zu sehende Kugel).
Alle weiteren Kugeln richten sich nach der ersten Hintergrundgrafik aus, auch die Grafiken darüber und links davon. */

Beispiel Nr. 6 So sieht's aus:

background-origin
 

HTML:

<div id="example-7">background-origin</div>

CSS:

#example-7 {
    background-image: url('img/ball.png');     
    height: 100px;
    border: 10px dotted black;
    padding: 30px;
    background-repeat:no-repeat;
 
    background-position: 20px 20px;
 
    background-origin: content-box;
}
/* background-origin und background-position können ohne weiteres kombiniert werden. Hier ist eine Positionierung um jeweils 20px nach unten und nach rechts von der oberen linken Ecke des eigentlichen Inhaltsbereich definiert. */

Beispiel Nr. 7 So sieht's aus:

background-origin
 

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.209 sec.

Browser-Marktanteile