Supertopic » Forum » Webentwicklung » XHTML / CSS » Erledigt: CSS: Background-Image im Body, bottom & fixed
Seite 1

Erledigt: CSS: Background-Image im Body, bottom & fixed

Tags:

background-image, xhtml css

 


Squeze
Überläufer

26.11.10
18:46 Uhr
Guten Abend liebe Wissenden ^^

Folgendes Problem:

Ich habe im <body> ein Hintergrundbild, welches fixed an den botton positioniert wird - also so:

html, body { height: 100%; }
body { background: #fff url(hintergrund.jpg) no-repeat bottom left fixed; }

... alles weitere sei mal eben ausgeblendet....

Soweit so gut. Nun möchte ich aber, dass wenn das Browserfenster kleiner als Höhe x ist, das Hintergrundbild sich nicht mehr höher schiebt...also quasi als ob man dem body zusätzlich ein min-height geben würde.

Grund ist, ich habe im oberen Bereich Inhalte, unter die das Hintergrundbild nicht geschoben werden sollte.

Steh ich nur auf dem Schlauch, oder ist das wirklich nicht möglich? ...von mir aus darf die Lösung auch JavaScript sein...

Hoffe das war einigermaßen verständlich pee
Link zu diesem Beitrag in die Zwischenablage kopieren
Patric
Veteran

26.11.10
19:17 Uhr
hast du schon mal probiert, ob der Body ein min-height akzeptiert?
Ansonsten vielleicht dem Inhalt (div?) ein min-height geben, dann wird bei kleiner Auflösung ja automatisch gescrollt und das Hintergrundbild sollte „unten“ sein.
Link zu diesem Beitrag in die Zwischenablage kopieren
Squeze
Überläufer

26.11.10
19:21 Uhr
Nope - funktioniert so nicht.

Das Problem liegt denke ich mal im „fixed“ - also background-attachment: fixed;

Das scrollen löst das Problem ja genau wegen dem fixed nicht. Nur muss das Hintergrundbild fixed sein planlos
Link zu diesem Beitrag in die Zwischenablage kopieren
Patric
Veteran

26.11.10
19:26 Uhr
Editiert: 26.11.10, 19:42 Uhr
öhm, stimmt. dann muss ich nochmal überlegen brain planlos

E: meine hirn funktioniert heut net richtig (zuviel chili D)
was mir noch eingefallen wäre, ist die höhe vom browserfenster auslesen (javascript) und dann nicht „bottom“ beim hintergrundbild verwenden, sondern höheBrowserfenster + x. Dann evtl. noch beim Inhalt Höhe oder Abstand hinzufügen (nach unten hin). Allerdings geht das nicht, weil sich da das hintergrundbild aus dem fenster herausschiebt... aaargh brainfuck

hmhmhmhm

falls es keine css-lösung gibt, evtl so: extra div um den inhalt packen (100% width) mit dem hintergrundbild, höhe vom inhalt auslesen und dann das äußere div entsprechend vergrößern. vlt geht das auch irgendwie wenn der inhalt einen margin-bottom bekommt, unter einer gewissen größe

alles nur so schnell ausgedacht ;)
Link zu diesem Beitrag in die Zwischenablage kopieren
caZpa
Veteran

26.11.10
19:39 Uhr
wenn ich das richtig verstanden habe, könnte folgendes klappen
  1. if ( $(window).height()<=xxx )
  2. $('body').css("background-position", "yyypx, left");
  3. else
  4. $('body').css("background-position", "bottom, left");
Quelltext in Zwischenablage kopieren
Link zu diesem Beitrag in die Zwischenablage kopieren
Rusty
Veteran

26.11.10
20:12 Uhr
Link zu diesem Beitrag in die Zwischenablage kopieren
Squeze
Überläufer

26.11.10
21:19 Uhr
caZpa schrieb am 26.11.10, 19:39 Uhr:

wenn ich das richtig verstanden habe, könnte folgendes klappen
  1. if ( $(window).height()<=xxx )
  2. $('body').css("background-position", "yyypx, left");
  3. else
  4. $('body').css("background-position", "bottom, left");
Quelltext in Zwischenablage kopieren

Das klingt auf jeden Fall plausibel! Werde ich morgen probieren -) Hätte man auch selber drauf kommen können pee



Rusty schrieb am 26.11.10, 20:12 Uhr:

http://ryanfait.com/sticky-footer/ ()

Fail -) Hat nichts damit zu tun ;-)
Link zu diesem Beitrag in die Zwischenablage kopieren
Martin R.
Veteran

26.11.10
21:23 Uhr
http://martinrack.de/temp/fixedbackgroun...ooter.html

aber keine ahnung welche browser da mitmachen,
gibt bestimmt auch noch ne besser lösung,
war nur mein erster gedanke
Link zu diesem Beitrag in die Zwischenablage kopieren
Martin R.
Veteran

26.11.10
21:36 Uhr
http://martinrack.de/temp/fixedbackgroun...oter2.html

wenns in dem <div> sein darf
position: fixed, wenn der background keine scrollbars erzeugen soll
und statt min-height könnte man auch padding-top nehmen
Link zu diesem Beitrag in die Zwischenablage kopieren
trulla
Stammgast

26.11.10
21:43 Uhr
Ich hab' da mal was vorbereitet - so als denkhilfe )
Übrigens: Die css() funktion ist elendig langsam. Mach sowas lieber über klassen.

CSS:
  1. body {
  2.  
  3. background: #fff url(http://dummyimage.com/500x100/d00/fff.gif) no-repeat left 100px fixed; }
  4. }
  5. body.fixed { background: #fff url(http://dummyimage.com/500x100/d00/fff.gif&text=fixed) no-repeat bottom left fixed;
  6. }
Quelltext in Zwischenablage kopieren
JS:
  1. $(document).ready(function() {
  2. bodyMin = 100; // ab da oder größer soll's fix positioniert sein
  3. $window = $(window); // window objekt cachen
  4. $body = $('body'); // body objekt cachen
  5. function adjustBodyBg() {
  6. if($window.height()>bodyMin) { // wenn fensterhöhe größer füge klasse "fixed" hinzu
  7. $body.addClass('fixed');
  8. } else { // sonst nimm sie weg
  9. $body.removeClass('fixed');
  10. }
  11. };
  12. adjustBodyBg(); // initial ein mal setzen
  13. $window.resize(function() { // bei jedem resize des fensters
  14. adjustBodyBg();
  15. });
  16. });
Quelltext in Zwischenablage kopieren

//
Martin R. schrieb am 26.11.10, 21:36 Uhr:

http://martinrack.de/temp/fixedbackgroun...oter2.html

wenns in dem <div> sein darf
position: fixed, wenn der background keine scrollbars erzeugen soll
und statt min-height könnte man auch padding-top nehmen

Örgs. Oder so. Ich denke zu kompliziert manchmal.
Link zu diesem Beitrag in die Zwischenablage kopieren
Rusty
Veteran

27.11.10
00:43 Uhr
Irrelevanter Beitrag (anzeigen):

Link zu diesem Beitrag in die Zwischenablage kopieren
Squeze
Überläufer

27.11.10
14:14 Uhr
Danke allerseits -) Funktionieren eigentlich alle Lösungsansätze / Lösungen einwandfrei -)
Link zu diesem Beitrag in die Zwischenablage kopieren
 
Supertopic » Forum » Webentwicklung » XHTML / CSS » Erledigt: CSS: Background-Image im Body, bottom & fixed
Seite 1 · nach oben
#