Hintergrundbild skalieren, Hintergrundbild skalieren Einstellungen

[Markus]

hallo,
ich habe mal wieder ein kleines Problem...

die Seite wird mit css gestaltet (der Tipp war anfangs etwas mühsam aber schon hilfreich was die Änderungen angeht)

oben befindet ein Container mit einer Hintergrundgrafik (ein JPG mit 8x8 Pixel) die in beide Richtungen wiederholt wird und mittig ein logo platziert wird.

links befindet sich ein Menü und rechts davon der Anzeigebereich der Seite und unten eine Fußzeile.

Die ganze Seite ist so angelegt, das ich nur Höhenangaben und Ränder gesetzt habe und den Rest eigentlich über Prozentangaben gelöst habe – der Hintergrund dieser Aktion ist das sich die Seite den verschiedenen Browsereinstellungen anpasst. Bis hierher klappt eigentlich alles (außer das sich Mozilla weigert einen Hintergrund anzuzeigen (egal ob Farbe oder Bild *grübel*)).

Jetzt wollte ich ein Hintergrundbild habe – etwas Schlichtes. Dabei handelt es sich um ein JPG das von links oben nach rechts unten von blau nach weiß verläuft.

Dieses Bild soll mit „Fixed“ und „no-repeat“ als Hintergrundbild verankert werden.

Das Problem das ich habe ist, dass das Bild nicht mit wachst bzw schrumpft wenn sich die Browsereinstellungen verändern. wenn man das Browserfenster verkleinert hat man irgendwann nur noch Blauverläufe und wenn man es stark vergrößert nur noch ein bild das halt im Hintergrund liegt *sieht aber nicht schön aus*

gibt es eine Möglichkeit dass das Hintergrundbild automatisch mit skaliert wird wie ich es auch bei den Containern machen kann, oder einen befehl für Farbverläufe?


Auszug der CSS datei:

QUELLTEXT

<style type="text/css">
<!--
body{
 background-color: #4F9EC9;
 background-image:url(../grafiken/bg-04.jpg);
 background-repeat:no-repeat;
 background-attachment:fixed;
 background-position : center;
 margin:0.5%;
 padding:0%;
 color: #4F9EC9;
 font-family: Arial, Verdana, Helvetica;
 }

 html{
 height:150%;
 margin:0.1%;
 padding:0.1%;
 color: #00007F
 }

.box1{
 min-height:100pt;
 background:#4F9EC9;
 background-image:url(../grafiken/bg_kopf4.jpg);
 background-repeat:repeat;
 margin:auto;
 padding:5pt;
 color: #00007F;
 }

.box2{
 background-image:url(../grafiken/bg_div.jpg);
 background-repeat:repeat;
 float:left;
 margin-top:1%;
 width:20%;
 min-height:100pt;
 padding:0.5%;
 }

.box3{
 background:transparent;
 float:right;
 width:75%;
 padding:5px;
 padding-left:5px;
 margin-top:1%;
 border:1px solid #0000DF;
 color: #00007F;
 font-family: Arial, Verdana, Helvetica;
 font-size: 100%;
 font-variant: normal;
 font-weight: 500;
 font-style: normal;
 line-height: normal;
 text-align: left;
 text-decoration: none;
 letter-spacing: normal;
 word-spacing: normal;
 }

.box4{
 clear:both;
 background:#4F9EC9;
 background-image:url(../grafiken/bg_div.jpg);
 background-repeat:repeat;
 color: #00007F;
 height:auto;
 margin:2%;
 padding:7pt;
 }
.
.
.

den Parameter "background-color:" habe ich nur angegeben, falls das Bild mal nicht geladen werden kann oder von Browser nicht angezeigt werden soll damit sich das gesamt Bild der Seite nicht zusehr verändert.


Markus

[sgt]

Klar, dass die Grafik beim Vergrößern pixelig wird.
Ob und in wie weit so ein Design sinnvoll ist, mag jeder selbst entscheiden.
Ich wollte halt nur eine Möglichkeit aufzeigen, die ohne JavaScript auskommt.
Es ist ja auch kein wirkliches Hintergrundbild. Der "Trick" an der Sache ist, dass mit zwei DIV-Containern gearbeitet wird, die auf zwei Ebenen liegen (Hintergrund und Seiteninfo). Wie Auge schon richtig sagte, wird die Höhe und Breite des Images an den Anzeigebereich angepasst.

Gruß
Stephan