Ich hoffe mal, dass ihr mir weiterhelfen könnt. Ich suche schon eine Weile nach einer Möglichkeit, mein Hintergrundbild an die Größe des Browserfensters anzupassen.
Mit dem derzeitigem css geht das ja anscheinend nur, wenn man ein extra bild einfügt und dieses skaliert, weil die hintergrundbilder nicht skaliert werden können.
Ich habe dazu jetzt folgende Anleitung gefunden:
Ein Bild als XHTML-Element als Hintergrundbild nutzen und an die Größe
des Anzeigebereiches anpassen.
Um dieses zu bewerkstelligen, ist es erst einmal notwendig, das Element body über den
gesamten Anzeigebereich erstrecken zu lassen. Dies ist ebenfalls mit CSS möglich, indem
margin und padding auf 0 gesetzt werden, Höhe und Breite aber jeweils auf
100 Prozent gesetzt werden. Vorsorglich sollte dann auch overflow: hidden gesetzt
werden.
Das spätere Bild, welches als Hintergrund verwendet werden soll, ist nun
als normales Bild mit dem Element img oder object in den
body-Bereich einzufügen.
Da img oder object selbst ein inzeilige Elemente sinf, muß man es
zusätzlich in ein Blockelement setzen. Da das keine spezifische Bedeutung hat,
wird dafür ein div-Element verwendet. Wenn dies direkt hinter dem
Element body erfolgt, sind später nicht die
Schichtpositionen mit z-index festzulegen. Nachteil dieser Position im XHTML-Quelltext ist
allerdings die Anzeige des Bildes an dieser Stelle, wenn das Darstellungsprogramm kein CSS aktiviert
hat.
Dem kann mit eimem Trick entgegengewirkt werden, indem die
XHTML-Attribute für Höhe und Breite auf 1 Pixel gesetzt werden.
Anschließend sind Höhe und Breite des Bildes mit einer direkten
CSS-Formatierung auf 100 Prozent zu setzen.
Der eigentliche Inhalt der Seite wird anschließend in einem weiteren div-Element eingefügt.
Dieses div-Element wird absolut positioniert und zwar mit top, bottom, left
und right jeweils auf 0. Um gegebenenfalls notwendige Rollbalken zu bekommen, muß
dieses div-Element mit overflow: auto ausgestattet werden.
Damit der eigentliche Inhalt noch einen Randabstand bekommt, ist dieser mit padding
anzugeben.
Quelle: http://olaf.kilu.de/hilfe.php?me=mehrcss&in=cssback
Ich habe jetzt versucht hiernach einen code in der css einzufügen, aber irgendwie bekomme ich den code noch nicht richtig hin.
Könnt ihr mir da vielleicht weiterhelfen?
Das wäre sehr nett!
bis denn!
Bild skalieren, Hintergrundbild an Anzeigefenster anpassen
ich habs gefunden! stand hier schonmal im forum:
CSS:
HTML:
Code:
CSS:
Code: Alles auswählen
body {
padding: 0;
margin: 0;
}
#background {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
#content {
position: relative;
z-index: 2;
padding: 1em;
}
Code:
Code: Alles auswählen
...
<body>
<img id="background" src="bild.png">
<div id="content">
<!--Hier den Inhalt der Seite-->
</div>
</body>
</html>
So funzt es noch besser, wie im Text beschreiben:
[/code]
Code: Alles auswählen
<html>
<head>
<title>
<style type="text/css">
html, body
{
margin: 0em;
padding: 0em;
height: 100%;
width: 100%;
}
body
{
font-size: 1em;
font-family:Helvetica, sans-serif;
background: #fff;
color: #000;
}
body[id]
{
overflow: hidden;
}
div#bg
{
height: 100%;
width: 100%;
}
div#rest
{
position: absolute;
top: 0em;
left: 0em;
right: 0em;
bottom: 0em;
overflow: auto;
padding: 2em;
}
</style>
</head>
<body id="body">
<div id="bg">
<img src="hintergrund.jpg" width="1" height="1" style="height: 100%; width: 100%;" alt=" " />
</div>
<div id="rest">
<Inhalt der Seite>
</div>
</body>
</html>
