Hintergrund aus zwei Bildern bestehend - Wie neben der Seite positionieren?

Mike_K · 10.10.2009

Ich habe ein Problem:

Ich habe eine Webseite mit einer Breite von 960 Pixeln und variabler Höhe. Bei der Gestaltung wurde das Hintergrundbild so angeordnet, dass links neben der Seite ein Bild von 250 Px und rechts ein Bild von 250 Px anlehnt.

Der Clou ist, dass die Seite immer mittig angezeigt werden soll. Wenn also die Auflösung zu klein ist, soll die eigentliche Seite mittig angezeigt, der Hintergrund überlagert werden. Bei hohen Auflösungen soll die Seite weiterhin in der Mitte bleiben. Das habe ich auch über den margin Befehl gelöst. Aber wie bekomme ich es nun hin, dass die beiden Bilder rechts und links dran sind und zur Not überschoben werden können?

Achso: Auch wenn man die Seite eigentlich so hätte anlegen sollen, dass sie für eine Auflösung von 1024x768 leicht umzusetzen ist, so ist das in dem Falle leider nicht so, und der "Kunde" möchte die Seite so umgesetzt haben.

Ich habe schon mal ein HTML / CSS Grundgerüst umgesetzt, auf welches ihr zurückgreifen könnt, wenn ihr mir helfen wollt / könnt:

CSS:

body{
margin:0;
padding:0;
}

#rechts{
width:250px;
height:250px;
background-color:#999999;
color:#FFFFFF;
}

#links{
width:250px;
height:250px;
background-color:#666666;
color:#FFFFFF;
}

#container{
width:960px;
height:800px;
margin:0 auto;
background-color:#0033FF;
}

HTML

<body>
<div id="links">Linkes Hintergrundbild</div>
<div id="container">Eigentliche Seite<br />Breite soll so bleiben, Höhe ist variabel</div>
<div id="rechts">rechtes Hintergrundbild</div>

</body>

Danke im Voraus.

LG Mike

cebito · 10.10.2009

AW: Hintergrund aus zwei Bildern bestehend - Wie neben der Seite positionieren?

Mach ein Bild, 1460px breit, rechts dein rechtes und links dein linkes Hintergrundbild drauf, die Mitte bleibt frei bzw. in der Hintergrundfarbe deines mittleren div. Das machst du jetzt als Hintergrundbild für die ganze Seite:

Code:

body {
/* irgendwelche definitionen */
background:url(../images/ogBild.jpg) top center repeat-y; /* oder auch ohne repeat */
}

Die beiden div für rechts und links kannst du dir sparen.

sokie · 10.10.2009

AW: Hintergrund aus zwei Bildern bestehend - Wie neben der Seite positionieren?

Falls Du es so gestalten willst, dass sich das rechte hintergrundbild immer an der rechten browserkante orientiert und das linke immer links, kommst du an absoluten Positionierungen kaum vorbei.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="de" />

<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
#rechts{
    width:250px;
    height:250px;
    background-color:#999999;
    color:#FFFFFF;
    position: absolute;
    right: 0;
    /*evtl noch in der senkrechten anordnen (top: yy px) */

}

#links{
    width:250px;
    height:250px;
    background-color:#666666;
    color:#FFFFFF;
    position: absolute;
    left: 0;
    /*evtl noch in der senkrechten anordnen (top: yy px) */

}

#container{
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -480px;
    width: 960px;
    height:800px;
    background-color:#0033FF;

}                      
</style>
<title>hintergrundbilder rechts-links</title>
</head>

<body>

<!-- Notierungsreihenfolge geändert-->
<!--sonst mit z-index arbeiten-->
<div id="links">Linkes Hintergrundbild</div>
<div id="rechts">rechtes Hintergrundbild</div>
<div id="container">Eigentliche Seite<br />Breite soll so bleiben, Höhe ist variabel</div>


</body>
</html>

Mike_K · 12.10.2009

AW: Hintergrund aus zwei Bildern bestehend - Wie neben der Seite positionieren?

cebito schrieb:
Mach ein Bild, 1460px breit, rechts dein rechtes und links dein linkes Hintergrundbild drauf, die Mitte bleibt frei bzw. in der Hintergrundfarbe deines mittleren div. Das machst du jetzt als Hintergrundbild für die ganze Seite:

Code:

body { /* irgendwelche definitionen */ background:url(../images/ogBild.jpg) top center repeat-y; /* oder auch ohne repeat */ }

Die beiden div für rechts und links kannst du dir sparen.

Die mittige Ausrichtung eines einzelnen Backgroundes habe ich gar nicht auf dem Schirm gehabt, klingt aber logisch und am einfachsten!!!

Danke!

sokie schrieb:
Falls Du es so gestalten willst, dass sich das rechte hintergrundbild immer an der rechten browserkante orientiert und das linke immer links, kommst du an absoluten Positionierungen kaum vorbei.

Nein, es soll an der rechten bzw. linken Aussenkante des Out-Containers anliegen.

Gruß Mike