✔ Hintergrundbild soll immer "festgehalten" werden

[SilverVegeto]

Hi Leute,
ich benutze in CSS folgenden Befehl um Hintergrundbilder "festzuhalten" damit man scrollen kann, jedoch das Hintergrundbild immer stehen bleibt.

overflow: auto;

Allerdings ist mir gerade aufgefallen das "der tolle" IE das mal wieder nicht auf die Reihe kriegt. Gibt es da einen Trick damit das auch im IE klappt?

 

[Maik]

Hi,

hierfür gibt es die CSS-Eigenschaft background-attachment.

mfg Maik

 

[Maik]

ich benutze in CSS folgenden Befehl um Hintergrundbilder "festzuhalten" damit man scrollen kann, jedoch das Hintergrundbild immer stehen bleibt.

overflow: auto;

Übrigens dient diese CSS-Eigenschaft grundsätzlich nicht zum "automatischen" Fixieren von Hintergrundbildern.

Standardkonforme Browser bringen mit ihrer Engine lediglich die von mir empfohlene CSS-Eigenschaft von Hause aus mit, wenn das Element neben overflow:auto eine Angabe zu seiner Höhe, sowie ein Hintergrundbild besitzt. Dies war in der Vergangenheit aber auch noch nicht so der "Standardfall".

Du kannst ja mal die nachfolgende Regel überprüfen, wie sich mit ihr in diesen Browsern das Hintergrundbild beim Scrollen der Seite verhält:

body {
overflow:auto;
background:url(...);
}

mfg Maik

 

[SilverVegeto]

Danke Maik für die gute Erklärung. Allerdings hab ich immer noch Probleme mit dieser Grafik. Wenn ich den Code anwende wie auf http://de.selfhtml.org/css/.. bleibt die Grafik immer mittig vom Bildschirm. Das Problem an der Sache ist wenn ich den Browser kleiner mache wird auch das Backgroundbild versetzt bzw. es entsteht ein schwarzer Bereich.

CSS-Code:

#box-022 {
  position: absolute;
  left: 114px;
  top: 206px;
  width: 652px;
  height: 283px;
  overflow: auto;
  background-image: url(../img/img_31.gif);
  background-repeat: no-repeat;
  background-position: center 206px;
  background-attachment: fixed;
  }

 

[Maik]

Dann lies bitte diesen Hinweis zu background-attachment in Verbindung mit background-position:

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

mfg Maik

 

[SilverVegeto]

Also langsam glaub ich, dass ich zu dumm dafür bin..
Es klappt bei mir solange bis ich die Größe vom Browser veränder, dann ist das Hintergrundbild immer verschoben weil die Pixel-Werte verändert sind..

Vielleicht kannst du mir helfen Maik, denn ich komm da echt nicht mehr klar.
Hab mal zwei Screens hochgeladen. [1] Website [2] Background

 

[Maik]

Hast du das Zitat nicht gelesen, oder seine Aussage nicht verstanden?

Ansonsten schau dir mal das dazugehörige Beispiel http://de.selfhtml.org/css/eigenschaften/anzeige/background_attachment.htm genauer an.

mfg Maik

 

[SilverVegeto]

Also eigentlich glaube ich schon das ich die Infos der http://de.selfhtml.org Website verstanden habe. Habe mir auch das Beispiel angeschaut und versucht umzusetzen.
Nur leider verschiebt sich der Background je nachdem wie groß der Browser ist.
Und das versteh ich einfach nicht.. sry

 

[Maik]

Scheinbar hast du den Hinweis und die zweite Variante in dem zuletzt verlinkten Beispiel nicht verstanden, also fasse ich nochmal zusammen: Wenn background-attachment:fixed mit einer Angabe zu background-position kombiniert wird, bezieht sich die Positionierung nicht mehr auf das vorgesehene Element, sondern auf den Viewport (Anzeigebereich des Browserfensters), und dementsprechend verschiebt sich das Hintergrundbild, wenn der Viewport skaliert wird.

mfg Maik

 

[SilverVegeto]

Oke danke für die Erklärung und die Geduld mit mir.
Dann gibt es ja keine richtige Lösung für mein Problem oder?