background-attachment: fixed
Thomas Tschernich
- css
0 Nina0 wahsaga0 Thomas Tschernich0 wahsaga0 Thomas Tschernich
Ich bastel grad an einer kleinen Homepage für ne Bekannte und wollte dabei unter die Links, die ganz oben stehen, einen Inhalts-div packen, in den alles reinkommt. Wird der Inhalt länger, soll nur das div scrollen, das Hintergrundbild dabei nicht. Klappt soweit ganz gut:
http://www.hoher-rat.de/miri/v1/index.php?guestbook;
Im Firefox2 sieht das ganze genauso aus, wie ich es haben möchte. Das Bild bleibt beim Scrollen stehen. Der Internet Explorer 7, den ich beim Programmierern nicht vergessen kann - sogern ich das würde, lässt jedoch das Bild mitscrollen, es kachelt dann unten neu, und das ist hässlich.
Wenn ich jetzt die dafür zuständige CSS-Eigenschaft background-attachment: fixed einstelle, liefern beide Browser eine Katastrophe:
http://www.hoher-rat.de/miri/v1/index.php?guestbook;bgfixed
Irgendwie scheint das Bild verkleinert und nach links oben geschoben worden zu sein. Diverse Einstellungen mit background-position haben die Kachelkanten in alle Himmelsrichtungen geschoben, aber nie das gewünschte Ergebnis gebracht.
Was mache ich falsch?
Vielen Dank für eure Hilfe,
Thomas
http://www.hoher-rat.de/miri/v1/index.php?guestbook;
da sehe ich weder mit dem Netscape 7.1 noch mit dem
Firefox etwas?
http://www.hoher-rat.de/miri/v1/index.php?guestbook;bgfixed
hier sehe ich alles, und es schaut auch gut aus,
bis auf die überflüssigen scroll balken..
http://www.hoher-rat.de/miri/v1/index.php?guestbook;
da sehe ich weder mit dem Netscape 7.1 noch mit dem
Firefox etwas?
Merkwürdig, auf mindestens 3 Rechnern funktioniert das ganze.
http://www.hoher-rat.de/miri/v1/index.php?guestbook;bgfixed
hier sehe ich alles, und es schaut auch gut aus,
bis auf die überflüssigen scroll balken..
Die Scrollbalken sind so gewünscht, um bei mehr Content im Inhalts-Div diesen scrollen zu können. Im Gästebuch sind so viele Test-Einträge drin, was dies auch nötig macht.
Hallo:
http://www.hoher-rat.de/miri/v1/index.php?guestbook;bgfixed
hier sehe ich alles, und es schaut auch gut aus,
bis auf die überflüssigen scroll balken..Die Scrollbalken sind so gewünscht, um bei mehr Content im Inhalts-Div diesen scrollen zu können. Im Gästebuch sind so viele Test-Einträge drin, was dies auch nötig macht.
Du kannst dem Div die CSS Eigentschaft overflow: auto; geben, dann ist der hässliche horizontale Scrollbalken, der im Moment unnütze ist, nicht zu sehen.
Du kannst dem Div die CSS Eigentschaft overflow: auto; geben, dann ist der hässliche horizontale Scrollbalken, der im Moment unnütze ist, nicht zu sehen.
Das passt, dankefein ;) dachte bisher, dass overflow: auto das div-Element nach unten ausdehnen würde.
hi,
Wenn ich jetzt die dafür zuständige CSS-Eigenschaft background-attachment: fixed einstelle, liefern beide Browser eine Katastrophe: [...]
Irgendwie scheint das Bild verkleinert und nach links oben geschoben worden zu sein.
"Irgendwie" scheinst du nicht berücksichtigt zu haben, dass bei background-attachment:fixed das Hintergrundbild am Viewport ausgerichtet wird.
gruß,
wahsaga
"Irgendwie" scheinst du nicht berücksichtigt zu haben, dass bei background-attachment:fixed das Hintergrundbild am Viewport ausgerichtet wird.
Keine Möglichkeit, es an dem Element auszurichten, von dem es das Hintegrundbild ist?
hi,
"Irgendwie" scheinst du nicht berücksichtigt zu haben, dass bei background-attachment:fixed das Hintergrundbild am Viewport ausgerichtet wird.
Keine Möglichkeit, es an dem Element auszurichten, von dem es das Hintegrundbild ist?
Nur, wenn dessen Position in Bezug auf den Viewport (genauer: auf dessen obere linke Ecke) bekannt ist - so dass das Hintergrundbild in Bezug auf den Viewport mit entsprechendem Versatz ausgerichtet werden kann.
gruß,
wahsaga
Nur, wenn dessen Position in Bezug auf den Viewport (genauer: auf dessen obere linke Ecke) bekannt ist - so dass das Hintergrundbild in Bezug auf den Viewport mit entsprechendem Versatz ausgerichtet werden kann.
Ich habe aber eine variable Fensterbreite, da das div eine feste Breite hat, aber horizontal zentriert ausgerichtet ist. Ich hätte dann also nur die Möglichkeit, via Javascript die Fensterbreite rauszufinden und daran das Bild auszurichten? Die Alternative wäre wohl ein <iframe> - weiß grad nicht was das geringere Übel ist :(
hi,
Nur, wenn dessen Position in Bezug auf den Viewport (genauer: auf dessen obere linke Ecke) bekannt ist - so dass das Hintergrundbild in Bezug auf den Viewport mit entsprechendem Versatz ausgerichtet werden kann.
Ich habe aber eine variable Fensterbreite, da das div eine feste Breite hat, aber horizontal zentriert ausgerichtet ist.
Ist denn der Abstand des Divs von oben bekannt?
Im Viewport kannst du ein Hintergrundbild ja ebenfalls zentriert ausrichten.
Nur dass es dann an den Grenzen des Divs aufhört, darfst du nicht erwarten.
gruß,
wahsaga
Hi,
Im Viewport kannst du ein Hintergrundbild ja ebenfalls zentriert ausrichten.
Nur dass es dann an den Grenzen des Divs aufhört, darfst du nicht erwarten.
Doch, bei background-attachment:fixed darf er das.
Denn dann wird zwar die Position am viewport ausgerichtet, sichtbar darf aber nur der Teil sein, der innerhalb des Elements liegt, das das Hintergrundbild hat. (Zitate aus http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment: "If the background image is fixed within the viewport (see the 'background-attachment' property), the image is placed relative to the viewport instead of the element's padding area." und "Even if the image is fixed, it is still only visible when it is in the content, padding or border area of the element." )
cu,
Andreas
hi,
Nur dass es dann an den Grenzen des Divs aufhört, darfst du nicht erwarten.
Doch, bei background-attachment:fixed darf er das.
Natürlich, du hast Recht.
background-attachment:fixed wirkt sich ja ausschliesslich auf die Ausrichtung auf, meine Nachlässigkeit.
gruß,
wahsaga
Vielen Dank für eure Hilfe. Mit der Angabe "background-position: center 0px" passt jetzt alles. Interessant daran ist aber dass die 0px bedeuten, dass sich das Bild eben nicht am Viewport (=gesamter für den Browser zur Verfügung stehender Screen?) sondern am div orientiert.
hi,
Mit der Angabe "background-position: center 0px" passt jetzt alles. Interessant daran ist aber dass die 0px bedeuten, dass sich das Bild eben nicht am Viewport (=gesamter für den Browser zur Verfügung stehender Screen?) sondern am div orientiert.
Sicher?
Gerade von mir und Andreas gemachte Anmerkungen auch verstanden?
(Aktualisierte) Beispielseite?
gruß,
wahsaga