Hintergrundbild mit CSS strecken

Ja, ein Hintergrundbild mit CSS zu strecken, ist möglich. Mit den folgenden CSS-Schnipseln streckt man ein Hintergrundblid über den ganzen Bildschirm:

In die CSS-Datei kommt dieser Code:

html, body {
height: 100%;
margin: 0;
padding: 0;
}
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#content {
position:relative;
z-index:1;
}

Das Bild kommt an den Anfang des Body-Bereichs, während der restliche Inhalt von einem Div-Container umschlossen wird, dessen Eigenschaften per CSS definiert wurden:

<body>
<img src="bg.png" id="bg" />
<div id="content">
...
</div>
</body>

Damit auch der IE6 die Anweisungen richtig interpretiert, muss nur noch der folgende Code in den Head-Bereich eingefügt werden:

<head>
...
<!--[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]-->
</head>

gefunden auf About.com

04-12-2009
Kommentar ablassen:

Abschicken!


Mehr
Meta Description für Tags in Wordpress
Wordpress Head aufräumen
Noindex für Wordpress Pagination
IP Bereiche mit CIDR sperren
Dropdown Liste für Faceted Search

Sitemap & Archiv
Impressum & Datenschutz
Tag the Web

« - »