Bildschirmfüllendes Bild mit css

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(): 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(): 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(): 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(): 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(): 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 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 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 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

CSS3 macht es nett und angenehm, leider sind nicht alle Browser dafür bereit: ein Bild als Hintergrund der Seite soll immer den ganzen Bildschirm (oder eben das Browserfenster) füllen, nicht verzerrt sein und möglichst noch mittig platziert werden.

Eines vorweggenommen: Ich fand keine reine CSS Lösung, die das auch für IE6 und IE7 möglich macht. Ohne der mittigen Platzierung gibt es Möglichkeiten, ohne proportionales skalieren sowieso. Hier nun Techniken für oben beschriebenen Fullscreen-Effekt.

Technik1: Kurz und einfach mit CSS3

background: url(dasBild.jpg) no-repeat center center fixed;
background-size: cover;

bzw. gibt es diese browsereigenen Bezeichnungen – zur Sicherheit:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

Für alle Browser, die CSS3 unterstützen. Alle anderen Browser platzieren das Bild in Originalgröße in der Mitte des Browserfensters. Ist das Bild zu klein, dann  ist Rand in der Hintergrundfarbe sichtbar; Ist das Bild größer, dann wird an allen Seiten gleich viel abgeschnitten.

Da ich annehme, dass bei grösserer Bildschirmauflösung (und damit verbundenem grösserem Viewport) auch ein modernerer Browser verwendet wird, ist das die beste Art um einen einfachen fullscreen zu erzielen. Bei älteren Browsern entfällt “nur” die Skalierung.

Bsp.: Fullscreen mit CSS3

screenshots von IE7

Auch für CSS2 gibt es Möglichkeiten. Zwei habe ich hier gefunden: http://css-tricks.com/perfect-full-page-background-image/ – teilweise ergänzt mit Tips von: http://paulmason.name/item/full-screen-background-image-pure-css-code

Für beide Techniken gilt: Damit sich das Bild dynamisch an das Browserfenster anpasst, muss es innerhalb eines <img> tag im HTML stehen. Das Bild ist bei mir das erste Element nach <body>.  Wie so oft gilt auch für diese Techniken, dass alte Versionen des Internet Explorers Probleme machen.

Technik 2 : skalieren mit einer class, positionieren mit @media query

img.bg {
min-height: 100%;
min-width: 1400px; /*tatsächliche Bildbreite*/
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0; }

Die zentrierte Positionierung erfolgt über eine @media Abfrage mit max-width und max-height. Die Abfrage für width und heigth ist eigentlich erst in CSS3 verankert, wird aber von vielen Browsern verstanden. (Firefox 3.5, Opera 9.5, Safari4, Chrome4) Der Internet Explorer kann damit erst ab Version 9 etwas anfangen, Opera macht angeblichProbleme mit der Positionierung…

@media screen and (max-width: 1400px) { /*tatsächliche Bildbreite*/
img.bg {
left: 50%;
margin-left: -700px; /* die Hälfte von meinem Bild*/
} }
@media screen and (max-height: 937px) { /*tatsächliche Bildhöhe*/
img.bg {
left: 50%;
margin-top: -465px; /* die Hälfte von meinem Bild*/
} }

FAZIT: Schön, einfaches HTML, die @media query mit width funktioniert allerdings erst ab Version 9 des Internet Explorers

IE6 und IE5: Wenn der <img> tag im HTML gleich nach dem body kommt, dann liegt das Bild ÜBER dem Inhalt. Wenn es im HTML am Ende geschoben steht (über dem schliessenden </body> tag) wird auch hier das Bild als Hintergrund angezeigt.

In IE6 funktioniert diese fullscreen-Technik nicht, weil dieser Browser min-width und min-height nicht kennt. Stattdessen interpretiert er die normale width und height als Minimalgrössen und skaliert dementsprechend (width:100%, height:auto).

Bsp.: CSS2 Technik 1

 

Technik 3: div mit 200%, img mit 50%

diese Technik setzt das Bild in ein eigenes div, das doppelt so gross wie das Browserfenster ist, und zentriert es darin. Das Bild füllt nun dieses div aus oder ist zumindest halb so hoch oder breit, was der Grösse des Browserfensters entspricht.

html, body{/*vor allem notwendig für IE...*/
padding:0;
margin:0;
overflow:auto;
}
#bg { position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%; }

#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}

Fazit: mehr HTML und teilweise überraschende skalierungen

Probleme in IE6 und IE7: scrollbar, skalierung und positionierung… (Kommentare dazu sind willkommen! Ich teste hauptsächlich mit http://netrenderer.de/)

Während IE6  fullscreen schafft, aber Probleme mit den scrollbalken macht, verhaut IE7 den fullscreen völlig…

Funktioniert ab IE8

Bsp.: CSS2 Technik 3

 

Das wirklich grosse Problem sind fehlende Scrollbalken (IE6 und IE7 im netrenderer, IE7 auf einem alten Laptop hatte sie), denn dabei geht es um fehlende Information auf der Seite, und nicht nur um ein fancy Background image.

Technik 4: Technik 3 mit extra scrollbalken

Eine dritte Alternative fand ich auf http://www.drweb.de/magazin/100-hintergrundbild-im-browser/. Diese Technik entfernt die scrollbalken vom body und setzt den gesamten Inhalt in einen container mit scrollbalken… Nicht gerade schön, und das Demo auf dieser Seite ist auch nicht mit zentriertem Bild. Diese Technik ist ur dann zu empfehlen, wenn garantiert IE6 Nutzer die Seite sehen müssen.

Ich habe diese Technik mit der zweiten fullscreen Technik kombiniert. Das Ergebnis: IE6 macht einen fullscreen, nicht zentriert mit scrollbar; IE7 macht irgendetwas mit scrollbar; ab IE8 läufts.

body, html {
height: 100%;
width: 100%;
margin:0;
padding:0;
overflow:hidden;/*der scrollbar wird vom body entfernt*/
position: relative;
}
#bgimg { /*Hintergrundbild wie bei der zweiten Technik*/
position:fixed;
 top:-50%;
 left:-50%;
 width:200%;
 height:200%;
z-index:1; }
#bgimg img{
position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 margin:auto;/*rückt es in die mitte*/
 min-width:50%;
 min-height:50%;
}
#scrollbar {/*das ist der Container mit scrollbar*/
 position:absolute;
 width:100%;
 height:100%;
 top:0;
 left:0;
 overflow:auto;
 z-index:2;}

 

#content{
position:relative;
width:600px;
margin:0 auto;
border:1px solid #fff;
color:#000;
padding:10px;
z-index:10;/*der content muss nun im z-index drüber liegen*/
}

Bsp.: scrollbalken nicht am body

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>