Hintergrundbild 100% Höhe und Breite

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
voloya

voloya hat kostenlosen Webspace.
2:56, 16.11.2012
Hallo

Ich würde gerne ein tag/hintergrund">Hintergrundbild auf 100% Höhe und Breite zerren, egal wie groß das Browserfenster. Dabei habe ich auch schon eine überraschend einfache Lösung gefunden:
```
<div id="hintergrund">
<img src="hintergrund.jpg" alt="" style="width: 100%; height: 100%;">
</div>
```
Das funktioniert bei allen Browsern, die ich getestet habe: Firefox 16, Firefox 3, IE 9 und der Android-Browser (ICS).

Wenn ich aber nun den doctype setze:
```
<!DOCTYPE HTML>
```
.. funktioniert diese Lösung nicht mehr, zumindest bei der Höhe.

Gibt es denn eine "korrekte" Lösung für so etwas, die von allen Browsern verstanden wird?

mfg
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
pcw

pcw hat kostenlosen Webspace.

6:07, 16.11.2012
Moin, moin

Schau mal hier: http://srobbin.com/jquery-plugins/backstretch/

~~g****e~~

9:47, 16.11.2012

<img src="hintergrund.jpg" alt="" style="position:absolute;top:0px;left:0px;width:100%;height:100%;">

Du musst es auch ganz an die Ränder setzen.

Liebe Grüße

riko-keil

riko-keil hat kostenlosen Webspace.
18:18, 16.11.2012
Hast du den das padding vom body auf null gesetzt?
```
<script type="text/css">
body {
padding : 0;
}
</script>
```
dann müste eigendlich:

<div id="hintergrund">
<img src="hintergrund.jpg" alt="" style="width: 100%; height: 100%;">
</div>
funktionieren.

Beitrag zuletzt geändert: 16.11.2012 18:24:16 von riko-keil
askmewhat

askmewhat hat kostenlosen Webspace.
14:21, 6.2.2013
Das Bild ganz am Rand der Seite hinsetzen geht auch im Body-Tag:
```
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
```

~~h**s~~

14:32, 6.2.2013

klar geht das auch bei "<!DOCTYPE HTML>". du solltest aber auch darauf achten das du "height:100%" vom obersten element-knoten (html) komplett bis zu dem zu formatierenden element "durchreichst", vor allem die älteren internet-explorer werden dirs danken...
außerdem bedenke das scrollverhalten. wenn der vordergund 100% der fensterhöhe überschreitet würde das bild eventuell "weggescrollt werden" - da brauchst du dann einen vordergrund-wrapper:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <title>Hintergrund</title>
        <style type="text/css">
			html, body {
				width:100%;
				height:100%;
				margin:0px;
				padding:0px;
				overflow:auto;
			}
			body > img {
				width:100%;
				height:100%;
			}
			body > div {
				position:absolute;
				top:0px;
				left:0px;
				width:100%;
				height:100%;
				overflow:auto;
			}
		</style>
    </head>
    <body>
		<img src="hintergrund.jpg" alt="">
        <div>
        	
            <p>Vordergrund</p>
            
        </div>
    </body>
</html>

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city