PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr

PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr (https://www.php-resource.de/forum/)
-   HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS (https://www.php-resource.de/forum/html-javascript-ajax-jquery-css-bootstrap-less/)
-   -   [CSS] Hintergrund unten will nicht (https://www.php-resource.de/forum/html-javascript-ajax-jquery-css-bootstrap-less/88161-css-hintergrund-unten-will-nicht.html)

strauberry 09-11-2007 21:29

[CSS] Hintergrund unten will nicht
 
Hallo zusammen,

hab hier schon paar Beiträge zu dem Thema gefunden, aber noch keine Lösung dazu :(

Möchte mein 50px hohes Hintergrundbild am unteren Ende der Seite haben. Wenn die Seite zu lang ist muss man scrollen und sieht erst dann den Hintergrund. Also nicht Viewport sondern seite.

Code:

body { margin: 0; padding: 0; background-image: url(/pfad/di0001_bgbottom.gif); background-repeat: no-repeat; background-position: center bottom; }
Der Hintergrund wird einfach nicht angezeigt.

Was muss ich tun?

VIELEN DANK!

Benny-one 09-11-2007 23:41

html, body {
height: 100%;
}

strauberry 10-11-2007 09:45

Danke für die Antwort!

Funktioniert aber leider nur halb :-) Wenn es keine Scrollbars gibt, ist der Hintergrund am unteren Ende der Seite, das passt. Muss man aber scrollen, liegt der Hintergrund genau in der Mitte. Durch diese Angabe bezieht sich das bottom wohl auf den Viewport und nicht auf die Seite.

pekka 10-11-2007 10:44

Da gab es einen Trick... War das min-height?

asp2php 10-11-2007 10:49

oder mach ihn am Bildschirmrand fest (position:fixed), dann ist es egal wie lang die Seite ist.

strauberry 10-11-2007 10:58

min-height raffen nicht alle Browser und wenn ich position:fixed mache, bleibt der beim scrollen stehen :-) ein position: absolute; bottom: 0px; richtet das Teil am Viewport aus.... ist das ne K***

ghostgambler 10-11-2007 12:41

Dann machst du halt mehrere Angaben, allá
Code:

html, body {
  min-height:100%;
}
* html, * html body {
  height:100%;
}


strauberry 12-11-2007 08:34

Mit den verschiedenen Angaben würde zwar das Browser-Problem behoben, aber leider nicht, dass sich das 100% auf das Viewport bezieht.

ThaDafinser 12-11-2007 11:54

absolutes div?

Wyveres 12-11-2007 17:13

wie währe es mal mit der richtigen angabe für den BG x)

z.b. background-attachment:fixed;


www.css4you.de

Benny-one 12-11-2007 17:21

Weil dadurch das BG so groß wie der Viewport sein müsste. Aber da man vermutlich nur ein 1px hohes und vll 800px breites bild vom Browser vertikal wiederholen lassen möchte, braucht man eben background-repeat und kein fixed. Und das ganze Problem lässt sich mit height: 100% und min-height: 100% lösen. Es muss allerdings eine Browserweiche verwendet werden, weil der IE allergisch auf min-height und der FF allergisch auf das height reagiert, wenn min-height gesetzt wurde. So wars glaube ich. Und wenn nicht, es gibt zig Seiten (sogar viele meiner Seiten) nutzen das.

Wyveres 13-11-2007 09:40

Zitat:

Original geschrieben von Benny-one
Weil dadurch das BG so groß wie der Viewport sein müsste. Aber da man vermutlich nur ein 1px hohes und vll 800px breites bild vom Browser vertikal wiederholen lassen möchte, braucht man eben background-repeat und kein fixed. Und das ganze Problem lässt sich mit height: 100% und min-height: 100% lösen. Es muss allerdings eine Browserweiche verwendet werden, weil der IE allergisch auf min-height und der FF allergisch auf das height reagiert, wenn min-height gesetzt wurde. So wars glaube ich. Und wenn nicht, es gibt zig Seiten (sogar viele meiner Seiten) nutzen das.
Oo? hä was hat Background-repeat: repeat-y; mit Background-attachment:fixed; zutun?

http://ddc-forever.de/bg_div.html

beweist das beides geht!

und es geht im Opera, IE und FF

Und nichts mit min-height height für body ...

und selbst wenn ich background-repeat auf no-repeat stelle bleibt das verhalten gleich.

Benny-one 13-11-2007 09:49

:goth: okay, das ergebnis hatte ich so nicht erwartet. macht die sache ja einfacher.

Allerdings geht das auch nicht immer, denn ab und zu (z.B. in meinem Fall) ist der BG für den Body bereits gesetzt und ein anderer BG muss einem DIV zugeteilt werden. Dann geht das nicht mehr.

Wyveres 13-11-2007 10:06

Zitat:

Original geschrieben von Benny-one
:goth: okay, das ergebnis hatte ich so nicht erwartet. macht die sache ja einfacher.

Allerdings geht das auch nicht immer, denn ab und zu (z.B. in meinem Fall) ist der BG für den Body bereits gesetzt und ein anderer BG muss einem DIV zugeteilt werden. Dann geht das nicht mehr.

ich will dir ja nicht wiedersprechen denn auch das ist Vollkommen FALSCH x)

ich hab die URL oben mal um zwei DIVs erweitert x) und dem ebenfalls folgendes zugewiesen.

Code:

// mit fixed
.background
{
background-color:yellow;
background-image:url("image/ddc_small.png");
background-attachment: fixed;
background-position: right;
background-repeat:repeat-y;
height:300px;
width:100%;
border:1px solid black;
}
// ohne fixed
.background_2
{
background-color:yellow;
background-image:url("image/ddc_small.png");
background-position: right;
background-repeat:repeat-y;
height:300px;
width:100%;
border:1px solid black;
}

EDIT:

das sagt css4you dazu x)

Bemerkung: Der Internet Explorer bis zur Version 6 kennt background-attachment nur im <body>-Tag. Opera 6, Mozilla 1 und Netscape 7 akzeptieren es auch in anderen Elementen wie Absätzen (<p>) und <div>-Containern. Der Opera 6 fixiert Hintergrundbilder sogar in Tabellenzellen.



wir könnten uns jetzt streiten was gemeint ist aber grundsätzlich ... kann man Hintergrundbilder auf jedes element papen ... und sie positionieren nur halt nicht fixieren ... wenn mans geschickt anstellt. kann man dadurch schöne effekte erziehlen *g*

Benny-one 13-11-2007 10:14

Ich weiß nicht ob das Ergebnis so von der gewünscht ist. Falls ja ist es nicht das, was ich meinte.

Guck mal hier http://www.dsl-flieden.de/ es geht mir um den Schatten der von oben bis unten gesetzt wird. Der FF bekommt ein min-height, der IE ein height 100% da es sonst beim Scrollen zu Fehlern kommt.

Bastel das mit deiner Variante nach, dann glaube ich dir :D


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:54 Uhr.

Powered by vBulletin® Version 3.8.2 (Deutsch)
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.3.0
[c] ebiz-consult GmbH & Co. KG