Hallo allerseits,
wenn ich dem BODY-Tag eine horizontal wiederholte Grafik zuweise, ergibt sich bei Verwendung einer weiteren Hintergrundfarbe oder -Grafik in einem anderen alles umschliessenden Element (HEAD-Element oder auch bei Nutzung eines extra dafür vorgesehen Containers) folgendes Problem:
1. Ohne Zuweisung der zweiten Hintergrundeigenschaft ist alles einwandfrei.
Im Browserfenster wird der Hauptbereich (grau) zentriert angezeigt, die Kopfgrafik ist links und rechts davon sichtbar:
Auch wenn ich das Fenster horizontal verkleinere und an den rechten Rand scrolle, ist alles in Ordnung. Es wird dann der mit #wrapper definierte Teil angezeigt, die Kopfgrafik ist sichtbar:
2. Bei Zuweisung einer weiteren Hintergrundeigenschaft ergibt sich jedoch folgendes Problem.
Ist das Browserfenster grösser als der #wrapper-Bereich, ist alles ok:
Bei Verkleinerung des Browserfensters wird jedoch beim Scrollen nach rechts die Kopfgrafik nicht mehr angezeigt (links ja):
Hier der Code für das zweite Beispiel:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="test.css" type="text/css" media="screen" charset="utf-8">
</head>
<body>
<div id="wrapper">
<div id="page">
</div>
</div>
</body>
</html>
Code:
* {
margin:0;
padding:0;
}
html {
background-color: black;
}
body {
background: url(images/header_bg.png) repeat-x left top;
}
#wrapper {
width: 900px;
margin: auto;
text-align: center;
border: 2px dashed red;
}
#page {
width: 860px;
height: 600px;
margin: auto;
background-color: gray;
}
Hat jemand eine Idee, wie man das Problem lösen könnte?
Liebe Grüße,
Christian