fullscreen background image CSS2 Technik;
mit @media Abfrage

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

Das Hintergrundbild wird im html als img gesetzt
der img-tag kommt gleich nach body; im IE6 kann das Bild über dem Inhalt zu liegen kommen... um Benutzern dieses Browsers zumindes den Inhalt zu zeigen, kann der img-tag im HTML vor den schliessenden body-tag gesetzt werden.

die Positionierung erfolgt über eine @media Abfrage; so wird je nach Bedarf das Bild rechts&links und/oder oben&unten beschnitten

geht in jedem guten browser (ab IE9)
die @media Abfrage mit width/height funktioniert erst ab IE9, Opera macht auch Probleme
IE 6 interpretiert die normale width und height als minimalgrössen und ignoriert min-width bzw -height - deshalb: hier kein Erfolg
---

CSS:

html, body{/*vor allem notwendig für IE...*/
height:100%;
width:100%
padding:0;
margin:0;
}
#bg-image {
z-index: -999;/*das Bild is das erste Element nach body; manche Browser brauchen deshalb den z-index*/
min-height: 100%;/*IE6 versteht das nicht und interpretiert die normale width und height als minimalgrössen...*/
min-width: 1400px;/*die tatsächliche Breite des Bildes; */
width: 100%;
height: auto;/*fullscreen bilder sind üblicherweise im Querformat, deshalb ist die Breite unser Fixwert*/
position: fixed;/*scrollen abschalten*/
top: 0;
left: 0;
}
/*mit der media Abfrage wird das Bild immer in der Mitte platziert und bei Bedarf rechts&links bzw/und oben&unten beschnitten;*/
@media screen and (max-width: 1400px){ /* das ist wieder die Grösse des Bildes, das ich verwende */
img#bg-image {
left: 50%;
margin-left: -700px; /* die Hälfte von meinem Bild*/
} }
@media screen and (max-height: 937px;){
img#bg-image {
top:50%;
margin-top: -465px;
} }