Positionierungs-Problem (Hintergrundbild)

[Magerquark]

Gegeben ist: Ein "Halter" mit vorgegebener Breite, zentriert. Darin einmal ein Content-Bereich und ein Navigationsbereich. Der Content-Bereich bekommt ein Hintergrundbild, das mit einem

background: url(ecke.gif) no-repeat fixed right bottom;

eingefügt wird. Es soll, wie man sehen kann, immer im unteren rechten Ecke des Content-Bereichs sitzen. Macht es auch. Allerdings nicht ganz richtig.

Ich habe das Problem einmal unten als Zip angehängt (1x HTML, 2x GIFs). Wenn man z.B. den Browser auf einer Breite von 1024 Pixel hat, dann verschwindet das Hintergrundbild etwas. Die rechte Seite wird abgeschnitten. Wird der Browser noch weiter aufgezogen, verschwindet das Bild noch mehr. Anders herum: Wird die Browserbreite schmaler als 1024 Pixel, rückt das Bild richtig rein.

Wie bekomme ich das Hintergrundbild richtig festgenagelt? So, dass es immer, egal bei welcher Browserbereite, vollständig zu sehen ist??

Danke für Denkanstöße.

M

[hero-master]

Servus Magerquark,
bei background-attachment:fixed ist das so ne Sache

1. Der IE6 und jünger interpretiert das nur für den body-Tag. Kann man aber lösen

2. Das Hintergrundbild richtet sich am Viewport aus, sprich am Browserfenster. Nicht an dem ELement, für dass du das BG-Bild definiert hast. Darum auch das "komische" Verhalten bei deinen Tests

[Magerquark]

Moin hero-master.

Ja, das mit dem Point of View habe ich mittlerweile auch schon herausgefunden. *hmm* Gibt es eine andere Methode, ein Hintergrundbild "festzunageln"? Nimmt man das fixed raus, dann wird das Hintergrundbild unten rechts vom Content-Container angebracht. In der richtigen Ausdehnung. Aber wenn der Content wie im Beispiel lang ist, erscheint das Hintergrundbild erst beim Scrollen. Ich wollte es immer sichtbar haben. Mit der Positionsangabe "bottom" klappt es ja. Nur mit dem rechts bei einem zentrierten Content-Bereich nicht.

[hero-master]

Du kannst es eben nur rechts am Brwser haben, aber nicht relativ zum Inhalt.
Ansonsten wäre noch die Möglichkeit feste Angaben zu machen, wenn du deine Seite links ausrichtest. Also dass das BG-Bild 500px vom linken Rand entfernt ist, oder so.
Ansonsten fällt mir keine Variante ein

[Mich@el]

Habe ein wenig probiert und mit dem Code sind die Bilder zumindest festgenagelt.

PHP-Code:

<style type="text/css">
html, body {
margin:0;
padding:0;
height: 100%;
overflow: hidden;
}
body {
background: url(.../Bild1.jpg) no-repeat fixed bottom left;
padding: 0 0 0 0 200px;
}
#box1 {
margin:0;
padding:0 200px 0 0;
background:url(.../Bild2.jpg) no-repeat fixed top right;
overflow:auto;
height: 100%;
}
</style> 


PHP-Code:

<div id="box1">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. ...
</p></div> 


[Magerquark]

Ahh. Sieht gut aus. Allerdings kann ich es im Moment noch nicht in mein Layout einbauen. Irgendwo hakt es da. So, wie Du es gemacht hast, ist es top, aber bei mir sind noch zwei, drei Dinge mehr drin. Und da kappelt es sich. Muss ich noch einmal schauen.

Bevor Du gepostet hast, habe ich auch noch ein wenig rumgespielt. Anbei ist eine Lösung, die etwas anders ausschaut als das Urproblem. Es ist noch ein wenig HTML hinzugekommen (s. Anhang). Ich bin in diesem Fall davon ab, das Hintergrundbild in den Contentbereich zu nageln. Stattdessen habe ich es einem neuen DIV zugeordnet. Dem body kann ich es nicht zuweisen, weil der im Original schon ein background-image hat.

Einziges Problem in diesem neuen Fall: Das Hintergrundbild wird brav angezeigt, aber wenn man runterscrollt, dann geht irgendwann "ein Vorhang hoch". Keine Ahnung, wo der herkommt! Ihr?

[hero-master]

Zitat von Magerquark

aber wenn man runterscrollt, dann geht irgendwann "ein Vorhang hoch". Keine Ahnung, wo der herkommt! Ihr?

Jap. Es liegt eben an deiner Höhendefinition. "height: 100%;". Weiter geht dann der Div nicht, in dem du das BG-Bild definiert hast, also die komplette Browserhöhe, danach ist eben schluss.
Abhilfe könnte ein overflow:auto; schaffen. Musste mal testen
Außerdem solltest du noch browserüberggreifend testen, vor allem im IE6, da dürfte es auch noch zu dem ein oder anderen Problem kommen

[Magerquark]

So geht es:

#meinbg{
 background: url(ecke.gif) no-repeat fixed right bottom;
 height: 100%;
 overflow: auto;
}

Und das mit den anderen Browsern ist klar. Ich entwickele aber erst in den guten Browsern (!) und wende mich dann dem Schrott zu. Jedesmal ein Horror, wenn man eine funktionierende Seite in einem IE öffnet... Wie schlimm mag es sein? Dann der Schlag ins Gesicht. Verzweiflung kommt auf. Aber das kennt Ihr ja alle...

Das mit dem overflow hat übrigens einen kleinen Nebeneffekt: Das Hintergrundbild wird um einige Pixel (ca. 10) aus dem Fenster rausgeschoben.