CSS 3 – Mehrere Hintergrundbilder

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/.sites/146/site459/web/ernstbrunner/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1120 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/.sites/146/site459/web/ernstbrunner/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1120 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/.sites/146/site459/web/ernstbrunner/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1120 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/.sites/146/site459/web/ernstbrunner/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1120 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/.sites/146/site459/web/ernstbrunner/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1120 Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/.sites/146/site459/web/ernstbrunner/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 621 Warning: Invalid argument supplied for foreach() in /home/.sites/146/site459/web/ernstbrunner/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 628 Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/.sites/146/site459/web/ernstbrunner/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 621 Warning: Invalid argument supplied for foreach() in /home/.sites/146/site459/web/ernstbrunner/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 628

Mit CSS 3 können mehrere Bilder als Hintergrund verwendet werden. Diese werden in “Layern” übereinander angeordnet. Positionierung und Kachelung erfolgt wie gewohnt. Hier nun die Kurzschreibweise und zwei Beispiele. 

Für die Beispiele habe ich eine Template angelegt, das die Mitte des Browserfensters mit einem kleinen schwarzen Quadrat anzeigt. Der IE6 kann das nicht, da die Beispiele aber CSS 3 demonstrieren,  ist das egal.

Hier wird vieles möglich! Die background-Definition kann in zukünftigen CSS-files sehr lang werden!

Bsp. 1: 3 Hintergrundbilder in der Mitte des Browserfensters

body{
background: url("bgimage1.jpg") center center fixed no-repeat, url("bgimage2.jpg") center center fixed no-repeat, url("bgimage3.jpg") center center fixed no-repeat;
}

 

Bsp. 2: 3 Hintergrundbilder unterschiedlich angeordnet

body{
background: url("bgimage1.jpg") 60% 30% no-repeat, url("bgimage2.jpg") top right fixed no-repeat, url("bgimage3.jpg") repeat-y;
}

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>