CSS background-attachment bei Firefox

[Balboa]

Bei Firefox oder auch Mozilla wird bei folgendem code das Hintergrundbild nicht richtig dargestellt. Das Bild wird irgendwie immer in der Mitte auseinandergeschnitten und der Teil des Bildes der normalerweise links ist, ist dann rechts.

Code: Alles auswählen

.test {
   z-index: 3;
   background-image:url(bild.gif);
   background-attachment: fixed;
   position: fixed;
   top: 80px;
   left: 60px;
   width: 234px;
   height: 61px;
}

Dieser Fehler passiert immer nur dann, wenn ich background-attachment:fixed; hinschreibe. Nehme ich diese Zeile raus, wird das Bild in Firefox oder Mozilla richtig dargestellt, in Opera scrollt das Bild dann aber weg.

Es gibt also entweder ein Problem mit Firefox/Mozilla wenn ich background-attachment: fixed; hinschreibe und es gibt ein Problem mit Opera wenn ich dies Zeile weglasse.

Gibt es dazu eine Lösung?

[babasave]

hi maybe musst du nur ein

background-repeat: no-repeat;
hinzufügen. kann es leider nich testen da ich keinen moz installiert habe.

unter https://www.w3schools.com/css/css_refer ... background
gibts ne liste mit den unterstützten browser für die klassen.

hier kann mans einfach testen https://www.w3schools.com/css/tryit.asp ... d-position

hoffe das hilft dir weiter.
~frank

[MonikaTS]

ja und nein,

der IE 6 akzeptiert position fixed nur im body tag.

wenn Du dies weißt und dies bei der lösung egal ist, dann :

Code: Alles auswählen

.test {
   z-index: 3;
   background-image:url(bild.gif);
   background-attachment: fixed;
   position: fixed;
   top: 80px;
  background-repeat:no-repeat;
     background-position: center  top;
   width: 234px;
   height: 61px;
margin-left:80px;
}

top und left sind ja relative Angaben im verwendeten Element, außer Dein Bild ist um soviel kleiner als diese class

aufgrund Deiner Schilderung nahm ich an, dass das Bild um genau die 80px nach Left verschoben wird und dann eben x-mal wiederholt..

wenn dies so ist, dann musst Duauch top rausnehmen und durch margin-top ersetzen, kann ich aber ohne *sehen* nur spekulieren.


statt left margin-left
und
background-position center top; kannst Du Dir aussuchen 1 Wert horizontal 2 Wert vertikal

brauchst Du das auch für den IE
empfehle ich

https://dean.edwards.name/IE7/compatibility/fixed.html

lg

[Balboa]

Das mit dem Internet Explorer ist egal, da ich für ihn eine andere CSS Datei nutze.

Mit background-position kann ich zwar den Hintergrund so verschieben, dass es in firefox/mozilla so ist wie ich es haben will, dann ist der Hintergrund allerdings in Opera um diese position verschoben und nicht richtig.

[MonikaTS]

ich kann derzeit nicht testen ...

vielleicht hilfts bei body tuts das

html, body.test{
height:100%;/*!*/
}

kann sein, dass Du die class test zur id test machen musst,

lg