Hintergrundbild fest positionieren

[Prinz]

Hallo zusammen,

ich habe folgende Seite neu erstellt. www.feuerwehr-schmergow.de

Wenn ich die Seite im Browser in der maximierten Ansicht anschaue passt alles. Wenn ich jetzt aber das Browserfenster verkleinere und nach links schiebe, schiebt sich auch das Hintergrundbild aus dem Inhaltsbereich nach links.

Wie kann ich das verhindern?
Hier meine CSS

``

body
{
 margin-top: 0px;
 margin-left: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 background-color: #000;
 padding:0px;
 background-image:url(../images/bg.gif);
 position: static;
}

td {
font-family: arial, helvetica, tahoma ,verdana,  sans-serif;
text-align:justify;font-size: 94%;line-height: 125%;}

h2{
 color:#FFFFFF;
 margin-bottom:20px;
 letter-spacing:0px;
 font-family: georgia, arial, helvetica, tahoma, verdana, sans-serif;
 font-size: 120%;
}

/* hauptgerüst */

.li {
width:38px;
background-image:url(../images/rand1.jpg);
border-right:solid 0px #000;border-left:solid 1px #808080;
}

.re {
width:38px;
background-image:url(../images/rand2.jpg);
border-left:solid 0px #808080;border-right:solid 1px #808080;}

#top {
 background-image:url(../FFW-Schmergow/Streichholz-oben-schrift.jpg);
 background-repeat:no-repeat;
 vertical-align:bottom;
 height:160px;
 background-color:#000000;
 border-bottom:solid 1px #343434;
 background-position: 120px 0px;

}

#leiste1 {height:0px;
background-repeat:repeat-x;
background-color:#000;
height:38px;
letter-spacing:0px;
color:#56686D;
font-variant:small-caps;
padding-left:0px;
padding-bottom:0px;
width:100%
vertical-align:middle;border-bottom:solid 1px #535353;
border-top:solid 1px #000;
border-bottom:solid 1px #000;
font-family: georgia,arial, helvetica, tahoma ,verdana,  sans-serif;
text-align:center
}

#sp1 {color:#fff;font: normal 11px/15px verdana, sans-serif;
padding-left:0px;padding-right:0px;padding-top: 0px;
background-color:#000;
background-image:url(../images/ob.jpg);
background-repeat:repeat-x;
border-right:solid 1px #343434;
text-align:center;
width:30%;
}

#sp2 {
 height:800px;
 color:#FFFFFF;
 padding-top: 30px;
 padding-bottom: 20px;
 padding-left: 20px;
 padding-right:20px;
 background-color:#000;
 letter-spacing:0px;
 width:100%;
 background-image:url(../FFW-Schmergow/Streichholz2.jpg);
 background-repeat:no-repeat;
 font-size: 94%;
 line-height: 125%;

}

#fussb {font: normal 11px verdana, sans-serif; color: #fff; padding:2px;
height:30px;
text-align:center;
background-color:#121212;width:100%;
border-top:solid 1px #343434;
background-image:url(../images/ob.jpg);
background-repeat:repeat-x;

}
/* scrolleiste internet explorer ab vers.5.5 */

body
{scrollbar-arrow-color: #000000; scrollbar-base-color: #ffffff;
scrollbar-highlight-color : #000000; scrollbar-shadow-color : #ffffff;
SCROLLBAR-TRACK-COLOR: #e6e6e6;}

/* menue oben */

.line {border-right:solid 1px #fff; }

#menu2 a, #menu2 a:visited , #menu2 a:active {display: block;
color:#909AA3;
background-color:#4f4f4f;
text-decoration:none ;font-family:verdana,arial, sans-serif;
padding-left: 0px; padding-bottom: 0px; padding-top:0px;
margin-left: 1px;margin-right: 1px;
border:solid 1px #353535;
line-height:34px;
text-align:center;
font-size: 86%;

background-image:url(../images/ob.jpg);
}

#menu2 a:hover {background-color:#ffcc66;color:#fff; text-decoration:none ;border:solid 1px #353535;

background-image:url(../images/mover.jpg);
}

/* menue li */

#menu1 a , #menu1 a:visited , #menu1 a:active {display:block;
background-color:#000;
color:#909AA3;
text-decoration:none ;
text-align:left

border:solid 1px #000;
font-size:86%;line-height: 190%;
font-family: verdana,"Trebuchet MS",arial, helvetica, verdana, tahoma, sans-serif;
margin:0px;

background-repeat:repeat-y;
background-position: 0% 50%;
border:solid 1px #000;
width:100%;

}

#menu1 a:hover{
background-color:#000;
color:#fff;
text-decoration:none ;
background-image:url(../images/movermenli.jpg);
background-repeat:repeat-y;

border:solid 1px #343434;

}

/* allgemeine links im text */

a:link, a:visited, a:active{ font-family: arial, helvetica, tahoma ,verdana,  sans-serif;
font-size: 97%;line-height: 125%;
text-decoration:underline;color:#56686D;}

a:hover{ text-decoration:none;background-color:#fff;
color:#222222;}

[Beat]

ich habe folgende Seite neu erstellt. www.feuerwehr-schmergow.de

Wenn ich die Seite im Browser in der maximierten Ansicht anschaue passt alles. Wenn ich jetzt aber das Browserfenster verkleinere und nach links schiebe, schiebt sich auch das Hintergrundbild aus dem Inhaltsbereich nach links.

Wie kann ich das verhindern?

Nicht einfach, weil das obere Bild seinen Startwert weiter links hat als das untere Hintergrund-Bild.
Du könntest aber die position des backgrounds für beide gleich halten, indem du sie beide rechts ausrichtest (Stichwort background-position).

mfg Beat

[Prinz]

danke für deine schnelle Antwort, aber mit Background Position Right funktioniert es leider nicht.

Gruß Deenis

ich habe folgende Seite neu erstellt. www.feuerwehr-schmergow.de

Wenn ich die Seite im Browser in der maximierten Ansicht anschaue passt alles. Wenn ich jetzt aber das Browserfenster verkleinere und nach links schiebe, schiebt sich auch das Hintergrundbild aus dem Inhaltsbereich nach links.

Wie kann ich das verhindern?

Nicht einfach, weil das obere Bild seinen Startwert weiter links hat als das untere Hintergrund-Bild.
Du könntest aber die position des backgrounds für beide gleich halten, indem du sie beide rechts ausrichtest (Stichwort background-position).

mfg Beat

[Topper]

Hallo,
auf den ersten Blick denke ich, daß dein Problem nichts mit css zu tun hat. Das Streichholz verschiebt sich, weil die Spalte mit dem linken Menü sich prozentual zur Gesamtbreite verändert - je nach Bildschirm-/Browserbreite. Gib der Spalte links (und nur DIESER Spalte!) eine feste Breite, die dem korrekten visuellen Eindruck entspricht und schon sollte der HG rechts feststehen...

Gruß Topper