Zahlreiche Webseiten setzen auf vollflächige Hintergründe. Doch bei zahlreichen Internetseiten ist die Umsetzung eher schlecht als recht und nicht für alle Geräte und Browsertypen korrekt eingerichtet. Wir zeigen heute einen CSS-Codeschnipsel, der vielen Webdesignern die Zeit des Experimentierens verkürzen könnte:
html {
background: url(images/hintergrund.jpg) no-repeat
center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Wer es lieber als Inline-Element mag:
<div id="bg">
<img src="images/hintergrund.jpg" alt=""/>
</div>
#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%;
}
