nicht angemeldet
Hintergrundpositionierung / uebergrosses Hintergrundbild
Hallo zusammen,
leider konnte ich im Forum keine Loesung fuer mein Problem finden. Ich habe Schwierigkeiten mit der Hintergrundplatzierung.
IE6/IE machen was ich will – alle anderen leider nicht.
Ich setze ein Bild mit – sagen wir mal mit 2000px Breite als Hintergrund fuer den <body> und platziere es mittig. Vorteil davon ist - ich bekomme keine Scrollbalken und man hat ein schoenes Hintergrundbild auch wenn man das Browserfenster sehr sehr weit aufzieht.
Keine Angst ich fuege Beispiellinks und den Quellcode weiter unten an!
Der Contentbereich der Webseite ist – sagen wir mal so 500px breit und soll mittig zentriert sein. Unterschreitet das Browserfenster eine Breite die dem des Contentbereiches entspricht dann soll der Contentbereich quasi links anstoßen und sich nicht links aus dem Fenster raus-verschwinden (damit bspw. das Menü weiterhin lesbar ist). In diesem Fall erscheint der horizontale Scrollbalken.
Soweit sogut. Das von mir erwuenschte Verhalten ist nun dass auch das Hintergrundbild des <body> nicht mehr weiter zentriert absolut zur Browserbreite ist – sondern zu dem Bereich den das Contentbereich – eigentlich der horizontale Scrollbalken - aufspannt.
Im IE6/IE7 erreiche ich genau dieses Verhalten. In allen anderen Browsern orientiert sich die Plazierung absolut zum Browserfenster.
Setze ich im <body>
background-attachment: scroll;
so verhanten sich IE6/IE7 und alle anderen Browser gleich. Und das Hintergrundbild des <body> ist zentriert absolut zur Browserbreite. Genau das will ich aber nicht!
background-attachment: fixed;
erreicht das gewuenschte verhalten im IE6/IE7 aber nich in allen anderen Browsern.
Weiss jemand da draussen zufaellig wie ich das gewuenschte Verhalten erzeugen kann?
Meine Recherechen und Tests sind leider langsam erschöpft und mir gehen alternative Ideen aus. Keine andere Art der Platzierung des Hintergrundbildes fuehrt zu dem Ergebnis dass ich ein riesieges zentriertes Hintergrundbild als Headerartwork verwenden kann ohne horizontale Scrollbalken zu bekommen.
Sobald ich das Hintergrundbild aus dem <body> herausnehme und in ein anderes Element hineinsteck habe ich Probleme mit den Scrollbalken.
sonnige greusse & einen schoenen Freitag,
-hubertus
P.S. Ich sollte wohl mal lernen mich kuerzer zu fassen...
== LINKS ==
background-attachment: fixed – IE und !IE verhalten sich gleich:
http://www.schwingleur.de/temp/backgroundtests/test1.html
background-attachment: scroll – IE und !IE verhalten sich unterschiedlich:
(dieses Verhalten in der Darstellung des IE ist in allen anderen Browsern erwuenscht!)
http://www.schwingleur.de/temp/backgroundtests/test2.html
== CODE ==
HTML ==
<html>
<head>
<link href="backgroundtest.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="div1" ></div>
</body>
</html>
CSS ==
body {
margin: 0px;
padding: 0px;
background-color: blue;
text-align: center;
background-position: top center;
background-repeat: no-repeat;
background-attachment: scroll; /* fixed */
background-image: url(background-artwork.gif);
background-repeat: no-repeat;
}
#div1 {
position: relative;
background-color: green;
top: 100px;
height: 500px;
width: 500px;
margin-left: auto;
margin-right: auto;
background-image: url(container-image.gif);
background-repeat: no-repeat;
background-position: top center;
}
-
Hallo Hubertus,
Setze ich im <body>
background-attachment: scroll;
background-attachment: fixed;probiere bitte folgendes aus:
body {
... deine Angaben ...
min-width:500px;
}sollte das nicht funktionieren, ich kann es gerade leider nicht ausprobieren. Bastel 2 divs ineinander:
<body>
<div id="div1" >
<div id="inner" ></div>
</div>
</body>Die CSS-Angaben des body ... mit dem min-width!! ... bekommt div1, 'inner' die des bisherigen div1. body selbst hat dann keine CSS Eigenschaften mehr.
Grüße,
Jochen
-
hey Jochen!
min-width im body fuehrt leider nur dazu dass der Scrollbalken erscheint. Die zentrierung des Bildes bezieht sich aber immer noch auf die absolute Browserbreite.
Die zweite Version scheint auf den ersten Blick zu funktinieren! Ich muss jetzt wech... aber ich dir und interessieren spaeter bescheid!
Ein zwei Punkte sind mir dabei allerdings noch unklar....hoffentlich kann ich das so in das bestehend Projekt uebernehmen.
Danke jedenfalls schon mal im voraus,
-hubertus -
So es funktioniert perfekt unter IE und !IE sowie unter den wichtigsten Linux-Browsern.
falls mal jemand auf das gleiche Problem stossen sollte:
http://www.schwingleur.de/temp/backgroundtests/test2.htmlHatte mich in die falsche Richtung verrannt. Vielen dank fuer deine Prompte Antwort,
VLG & schoenes Wochenende zusammen,
-hubertus
-