nicht angemeldet
Gradient-Background: wie Füllung der gesamten Dokumenthöhe?
1 0 0 0 0 
Gunnar Bittersmann
0
1
Gradient-Background: wie Füllung der gesamten Dokumenthöhe?
Hi,
ich bin gespannt, ob ein CSS-Spezialist hierfür überhaupt eine Lösung finden kann. Obwohl sich mein Wunsch einfach anhört, habe ich es trotz einiger Spielerei nicht geschafft.
Ich will ein HTML-Dokument erstellen, dessen Hintergrund aus einem CSS3-Gradient gebildet wird.
a) wenn das Browserfenster größer ist als die gesamte Dokumenthöhe (in meinem Fall ein <div>-Block, soll der Gradient bis zum Browserboden weiterverlaufen
b) wenn das Browserfenster kleiner als die gesamte Dokumentenhöhe ist (also zum scrollen ist), soll der Gradient gleichmäßig vom oberen Dokumentrand bis zum unteren Dokmenrand verlaufen (NICHT vom AKTUELLEN oberen Browserfenster zum unteren)
auf background-attachment:fixed will ich daher verzichten.
<style>
html {height:100%}
body {background-image: linear-gradient(#cfc, #5f5);}
div {width:500px; height:500px; background:#555;}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Fall a) funktioniert. Bei Fall b) (macht das Fenster einfach kleiner als die <div>-Box) ist der Verlauf aber nur genau die Browserhöhe hoch und beginnt unmittelbar unterhalb bei Scrollstart von neuem.
Wie kann ich das verhindern, so dass auch hier der Verlauf nur einmal und bis zum DOKUMENTende erzeugt wird?
-
Hi,
wenn du
html {height:100%}
mit
html {min-height:100%}
austauscht.
Ist das dann das gewünschte Ergebnis?
~dave
-
html {min-height:100%}
unglaublich, ich bin verblüfft wie einfach die Lösung ist :D
Ist genau die, die ich mir vorstelle, vielen Dank dave!<style> html {min-height:100%; background-image: linear-gradient(#cfc, #5f5);} body {} div {width:500px; height:500px; background:#555; background-attachment:fixed} </style> </head> <body> <div> </div> </body> </html>-
Moin,
html {min-height:100%; background-image: linear-gradient(#cfc, #5f5);}
Du solltest noch auf die Browser-Kompatibilität von
linear-gradient()achten. Folgende Anweisungen sollten die meisten (modernen) Browser abdecken*:linear-gradient(); -o-linear-gradient(); -moz-linear-gradient(); -webkit-linear-gradient(); -ms-linear-gradient();Grüße Marco
-
Hallo Martina,
für die aktuellen Firefox sieht der Code so aus:
linear-gradient(to top, #cfc, #5f5), wobeito topauchto bottom,to leftoderto rightheißen kann ... aber genaueres bei MDNla kai
-
@@misterunknown:
nuqneH
linear-gradient();
-o-linear-gradient();
-moz-linear-gradient();
-webkit-linear-gradient();
-ms-linear-gradient();-ms-Präfix ist Unsinn. IE < 10 kann keine Gradienten, IE 10 präfixfrei. Dito für -o-. -moz- ist auch schon seit einiger Zeit obsolet. http://caniuse.com/#search=gradient
Den kannst du in die Tonne kloppen! Der generiert falschen Code.
1. 'linear-gradient(bottom, …) enstspricht nicht de aktuellen Spec, es muss linear-gradient(to top, …) heißen.
2. unsinnige Präfixe, s.o.
3. ist es unsinnig, den prefixfreie Variante zuerst zu notieren. Erst die mit Präfix, die ohne zuletzt!
Qapla'
--
„Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)-
Moin,
Den kannst du in die Tonne kloppen! Der generiert falschen Code.
Hm, das wusste ich nicht. Ich wollte nur drauf hinweisen, weil im Chrome die präfixfreie Anweisung nicht interpretiert wird.
Grüße Marco
-
Hallo,
-moz- ist auch schon seit einiger Zeit obsolet. http://caniuse.com/#search=gradient
Hier irrt caniuse.com Muss hier mit einem FF10 arbeiten und der versteht -moz bzgl. gradient.
Ich weiß auch nicht so recht, warum du dich immer mit solcher vehemenz gg. die Präfixe wendest. Viele Firmen (und ich bin hier bei einer größeren) daten ihre Browser nicht immer ab. Muss hier auch mit IE8 im Firmen-Netzwerk und mit IE7 im geschlossenen Entwickler-Netzwerk auskommen. Manuelle Updates sind gesperrt. Einfluss habe ich darauf keinen.
Viele Grüße
Siri-
Hallo,
-moz- ist auch schon seit einiger Zeit obsolet. http://caniuse.com/#search=gradient
Hier irrt caniuse.com Muss hier mit einem FF10 arbeiten und der versteht -moz bzgl. gradient.
Nehm ich zurück! Hab den "Show all Versions" nicht gesehen!
-
-
-
Du solltest noch auf die Browser-Kompatibilität von
linear-gradient()achten. Folgende Anweisungen sollten die meisten (modernen) Browser abdecken*:Danke, das ist mir bewußt. Ich wollte nur verzichten die ganze Wurst für die einzelnen Browservarianten zu notieren, da es mit nur um das Prinzip ging.
Und als Fallback für irgendwelche älteren-Browser, die noch keine Gradients können, sollte man sowieso immer auch noch die gute alte background-color angeben.
-
-
-
-
Moin!
Warum gibst Du nicht einfach html den Hintergrund?
--
Signaturen sind blöd!-
Warum gibst Du nicht einfach html den Hintergrund?
das Verhalten ist damit in beiden Fällen das selbe, wie ursprünglich
-