Hallo, ich habe seit gestern ein größeres Problem.
Und zwar zerbreche ich mir den Kopf darüber, wie ich es hinbekomme eine Hintergrundgrafik die ich in einem div plaziert habe, nicht durch den Browser scrollbar zu machen.
Zur Erklärung:
Ich habe zwei Div-tags.
Einen der die Webseite an sich umschliesst (also Kopfbereich, Navigation und den Inhalt.
Und einen zweiten Div-tag, der den ersten Div umschliesst und worin eine Hintergrundgrafik angelegt ist.
So dass die Hintergrundgrafik rechts, links und unten ein wenig hervorschaut.
Wenn jetzt Besucher mit kleinerer Auflösung die Seite besuchen, sollen sie auf der Webseite scrollen können, da die Seite evtl. nicht vollständig angezeigt wird.
Was ich allerdings nicht möchte ist, dass der Besucher über die Hintergrundgrafik scrollen kann.
Hier eine Beispiel Webseite:
Auf http://www.quakelive.com
ist um die Webseite herum diese (http://cdn-web.quakelive.com/css/valances/default/default.jpg) Hintergrundgrafik eingebaut.
Es werden kleine Scrollbalken im Browser angezeigt, obwohl die Hintergrundgrafik verdeckt ist.
Erst wenn das Browserfenster so schmal gezogen wird, das es in den Inhalt reinreicht, erscheinen die Scrollbalken.
Nun versuche ich denselben Effekt auf einer Webseite zu erreichen.
Der Div-tag der die Hintergrundgrafik beinhaltet und die restliche Webseite umschliesst hab ich die ID "bodycontainer" gegeben.
Der Div-tag der die Webseite umschliesst hat die ID "container".
Hier ein Auszug wie sie in der CSS deklariert sind:
body {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
background-color: #333;
margin: 0 auto;
}
#bodycontainer {
background-image: url(../img/bodycontainer.jpg);
background-repeat: no-repeat;
margin: 0 auto;
height: 890px;
width: 1260px;
}
#container {
margin: 0 auto;
text-align: left;
width: 980px;
height: 814px;
}
Ich denke das ich hier mit "position" und "overflow" arbeiten müsste,
allerdings ist das schwer für mich nachzuvollziehen, wo ich was eintrage.
PS: Die Webseite soll horizontal zentriert bleiben, das heißt
position: fixed;
würde die Webseite leider links oben anheften und somit mein margin: 0 auto;
aushebeln.
Hat jemand eine Idee wie ich das realisiere, wie auf der Beispielseite?
Mit freundlichen Grüßen
decarabia