Opera vs. IE bzgl. background-image

[Jennesta]

Hallo,
habe da so ein kleines Schönheitsproblem im Hauptteil meiner HP.
Folgendes Problem:
Ich habe im div-Tag vom Hauptteil ein Hintergrundbild, welches nicht mitscrollen soll (Habe hier "overflow:scroll;" angegeben).
Bei Opera läuft alles sofort normal, jedoch zickt der IE rum und scrollt das Bild mit nach oben.
Dann dachte ich mir: "Richtig, haste vergessen es fest zu setzen." - Also direkt "background-attachment:fixed" hinzugefügt.
Joa...nun ists im IE super (wie vorher bei Opera auch) jedoch setzt Opera nun den Hintergrund ganz nach oben, also Browser-Koordinate 0|0.
Ich bin nun etwas überfragt was ich da machen kann, habe auch auf Google schon bisschen gesucht und gesehen das irgendwelche Browser das falsch machen, weiß aber nicht wie ich das umgehen kann.
Hat da zufällig jemand eine Idee? Ne Browserweiche (kenne mich mit denen nicht aus)?

mfg Jennesta

 

[Maik]

Hi,

du kannst einen "Conditional Comment" als CSS-Browserweiche einsetzen, um darin ausschliesslich für den IE background-attachment:fixed festzulegen.

Vereinfachtes Beispiel für die Syntax:

<style type="text/css">
<!--
div#box {
width:600px;
height:400px;
overflow:auto;
background:url(pfad/zur/grafik.jpg) no-repeat;
}
-->
</style>
<!--[if IE]>
<style type="text/css">
div#box {
background-attachment:fixed;
}
</style>
<![endif]-->

 

[Jennesta]

Hi,
also folgendes ich hatte das genauso eingegeben wie du es mit gesagt hast und bis einschließlich IE6 (habe ich) klappt das wunderbar.
Jedoch hat nen Kumpel das ganze mit dem IE7 betrachtet und sagte mir, "Hey dein Hintergrund sitzt nicht richtig im Fenster drinnen". Ich also den IE7 davon ausgeschlossen (da die anderen Browser das auch machten) nun zeigt er das Bild richtig an aber scrollt es mit... aber nur der IE7 alle anderen machen genau was ich will....
Nun die Frage weiß noch jemand etwas, was ich in die Browserweiche schreiben kann, oder muss ich einfach für den IE 7 nen größeres Hintergrundbild anfertigen, muss ja eig nur das Bild vergrößern und als .gif speicherm, wäre halt nur umständlich..

mfg Jennesta

 

[Maik]

Das obige Beispiel demonstriert einen interessanten Anwendungsfall aus der Kombination der Eigenschaften background-attachment und background-position. Beiden div-Elementen werden mittels background-position:center center mittig positionierte Hintergrundgrafiken zugewiesen. Im ersten Fall wird das Bild aufgrund von background-attachment:scroll in der Mitte des Elements selbst dargestellt. Im zweiten Fall jedoch orientiert sich dessen Position aufgrund der Verwendung von background-attachment:fixed am Viewport und wird damit in der Mitte des Browserfensters dargestellt.

• Quelle: http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_attachment
• Beispiel:http://de.selfhtml.org/css/eigenschaften/anzeige/background_attachment.htm