Der am Körper eingestellte CSS3-Verlaufshintergrund wird nicht gedehnt, sondern wiederholt?

429

<body>OK, sagen Sie, der Inhalt innerhalb der Summen 300px hoch.

Wenn ich den Hintergrund meiner <body>Verwendung von -webkit-gradientoder einstelle-moz-linear-gradient

Dann maximiere ich mein Fenster (oder mache es einfach größer als 300 Pixel). Der Farbverlauf ist genau 300 Pixel groß (die Höhe des Inhalts) und wiederhole dies, um den Rest des Fensters zu füllen.

Ich gehe davon aus, dass dies kein Fehler ist, da er sowohl im Webkit als auch im Gecko gleich ist.

Aber gibt es eine Möglichkeit, den Verlauf zu dehnen, um das Fenster zu füllen, anstatt ihn zu wiederholen?

css gradient JD Isaacks
quelle

716

Wenden Sie das folgende CSS an:

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Bearbeiten:margin: 0; Zur Körperdeklaration per Kommentar hinzugefügt ( Martin ).

Bearbeiten:background-attachment: fixed; Zur Body-Deklaration per Kommentar hinzugefügt ( Johe Green ).

Bryan Downing
quelle

4

Ich fand heraus, dass ich brauchte , um hinzuzufügen , margin:0;auf bodysonst bekam ich am Ende meiner Seite eine Lücke.

Martin

8

In Chrome und Safari führt body {height: 100%} dazu, dass sich die Seite (aber nicht der Verlauf) aus dem Ansichtsfenster heraus erstreckt.

thSoft

13

Ich musste einen Hintergrundanhang hinzufügen: behoben; zum Körper, um die untere Lücke (Webkit) loszuwerden.

j7nn7k

4

Wenn Sie einen Hintergrund für den Körper und dann die Höhe des HTML-Tags auf 100% setzen, werden im Internet Explorer seltsame Dinge ausgeführt. Hier ist ein Beispiel (png).

Justin Force

21

Stellen Sie sicher , dass background-repeatund background-attachmentkommen nach Ihren backgroundRegeln. Andernfalls wird der Hintergrund möglicherweise immer noch wiederholt.

Kell

158

In Bezug auf eine vorherige Antwort scheint die Einstellung htmlund bodyzu height: 100%nicht zu funktionieren, wenn der Inhalt gescrollt werden muss. Das Hinzufügen fixedzum Hintergrund scheint das zu beheben - neinneed for height: 100%;

Z.B:

body {
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}

Erweitern Sie das Snippet

Joshua Rudd
quelle

5

Dies funktionierte für mich in jedem von mir getesteten Browser (Chrome [Mac], Safari [Mac], Firefox [Mac / Win7], IE9 [Win7] und Opera [Mac]) ohne den Nebeneffekt der Bildlaufleiste "Höhe: 100%". Lösung. Vielen Dank!

Pipwerks

7

Ein Hinweis für diejenigen, die Sass / Compass verwenden. Sie können "Fixed" nicht direkt im Mixin festlegen. Um Fixes hinzuzufügen, fügen Sie die Eigenschaft hinzubackground-attachment: fixed

Kyle Mathews

2

Wenn Sie möchten, dass entweder der Hintergrund das Fenster füllt oder der Inhalt (je nachdem, welcher Wert größer ist), verwenden Sie min-height:100%(in kompatiblen Browsern)

cjk

Ich konnte den folgenden Code mit Compass ausführen: @include background (linearer Farbverlauf (oben, rot 0%, blau 100%) behoben);

mcranston18

Wie würde ich eine dritte Farbe hinzufügen?

sbaden

17

Ich weiß, dass ich zu spät zur Party komme, aber hier ist eine fundiertere Antwort.

Alles, was Sie tun müssen, ist zu verwenden min-height: 100%;und nicht, height: 100%;und Ihr Verlaufshintergrund erweitert die gesamte Höhe des Ansichtsfensters ohne Wiederholung, selbst wenn der Inhalt scrollbar ist.

So was:

html {
    min-height: 100%;
}

body {
    background: linear-gradient(#ff7241, #ff4a1f);
}

Ricardo Zea
quelle

Es sei denn, Sie müssen die HTML-Höhe auf 100% einstellen, zum Beispiel, wenn Sie eine klebrige Fußzeile benötigen

pro Stück Bart

15

Folgendes habe ich getan, um dieses Problem zu lösen: Es zeigt den Verlauf über die gesamte Länge des Inhalts an und greift dann einfach auf die Hintergrundfarbe zurück (normalerweise die letzte Farbe im Verlauf).

   html {
     background: #cbccc8;
   }
   body {
     background-repeat: no-repeat;
     background: #cbccc8;
     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8));
     background: -moz-linear-gradient(top, #fff, #cbccc8);
     filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbccc8');
   }

<body>
  <h1>Hello world!</h1>
</body>

Erweitern Sie das Snippet

Ich habe dies in FireFox 3.6, Safari 4 und Chrome getestet. Ich behalte die Hintergrundfarbe im Körper für alle Browser, die aus irgendeinem Grund das Stylen des HTML-Tags nicht unterstützen.

John Sanford
quelle

13

Das Einstellen html { height: 100%}kann mit dem IE Chaos anrichten. Hier ist ein Beispiel (png). Aber wissen Sie, was gut funktioniert? Stellen Sie einfach Ihren Hintergrund auf das <html>Tag.

html {
  -moz-linear-gradient(top, #fff, #000);
  /* etc. */
}

Der Hintergrund erstreckt sich nach unten und es tritt kein seltsames Bildlaufverhalten auf. Sie können alle anderen Korrekturen überspringen. Und das wird weitgehend unterstützt. Ich habe keinen Browser gefunden, mit dem Sie dem HTML-Tag keinen Hintergrund zuweisen können. Es ist vollkommen gültiges CSS und das schon eine Weile. :) :)

Justin Force
quelle

1

@ Lynda Das ist kein sehr hilfreiches Feedback. Würde es Ihnen etwas ausmachen, einen Fall bereitzustellen, in dem es nicht funktioniert?

Justin Force

Tut mir leid, dass ich vage bin. Ich bin mir nicht sicher, warum es nicht funktioniert. Sie können einen Verlauf hinzufügen html, der in meinem Fall jedoch teilweise auf der Seite angehalten wird. Das Hinzufügen background-attachment:fixedlöst das Problem. Ich habe dies auf mehr als einer Website gesehen, konnte aber die Ursache nicht finden.

L84

Der Sinn dieser Lösung ist, dass sie browserübergreifend funktioniert hat (übrigens 2012). Sie geben jedoch immer noch nicht an, über welchen Browser Sie sprechen. Wenn Sie immer noch Probleme haben, versuchen Sie es hinzuzufügen html, body { height: 100%; }.

Justin Force

Wahr. Es passiert in Firefox und Chrome (nicht in anderen Browsern getestet) und ich habe die Höhe und verschiedene andere Einstellungen ohne Glück ausprobiert (außer Hintergrundanhang). Na ja, keine große Sache und hoffentlich funktioniert Ihre Antwort für die meisten immer noch. =>

L84

Müssen noch mit No-Repeat und Fix täuschen.

MarsAndBack

12

Auf dieser Seite befinden sich viele Teilinformationen, jedoch keine vollständigen. Folgendes mache ich:

Erstellen Sie hier einen Farbverlauf: http://www.colorzilla.com/gradient-editor/
Stellen Sie den Farbverlauf in HTML anstelle von BODY ein.
Korrigieren Sie den Hintergrund in HTML mit "Hintergrundanhang: behoben;"
Schalten Sie den oberen und unteren Rand von BODY aus
(optional) Normalerweise erstelle ich eine <DIV id='container'>, in die ich alle meine Inhalte einfüge

Hier ist ein Beispiel:

html {  
  background: #a9e4f7; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #a9e4f7 0%, #0fb4e7 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); /* Chrome,Safari4+ */ 
  background: -webkit-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* IE10+ */
  background: linear-gradient(135deg,  #a9e4f7 0%,#0fb4e7 100%); /* W3C */ 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  background-attachment: fixed;
}

body {
  margin-top: 0px;
  margin-bottom: 0px;
}

/* OPTIONAL: div to store content.  Many of these attributes should be changed to suit your needs */
#container
{
  width: 800px;
  margin: auto;
  background-color: white;
  border: 1px solid gray;
  border-top: none;
  border-bottom: none;
  box-shadow: 3px 0px 20px #333;
  padding: 10px;
}

Dies wurde mit IE, Chrome und Firefox auf Seiten unterschiedlicher Größe und Bildlaufanforderungen getestet.

Rick Smith
quelle

1

Großartig! Ich habe Colorzilla verwendet und die Hauptantwort hat bei mir nicht funktioniert. Dieser tat es. Vielen Dank! :)

Stutfohlen

Warum bevorzugen Sie dies in HTML und nicht in BODY?

Sashaikevich

@ Sashaikevich Gute Frage. Ich habe diese Antwort seit 5 Jahren kaum mehr gesehen, deshalb erinnere ich mich überhaupt nicht mehr. Der Grund, warum ich es getan habe, gilt möglicherweise nicht für alle Browser-Updates. Wenn Sie alles auf den Körper verlagern würden, wäre ich neugierig, ob es genauso funktioniert.

Rick Smith

@ RickSmith Nein, ich habe HTML gestylt. Aber ich habe gerade die Regeln verschoben, um sie auf den Körper anzuwenden, um sie zu überprüfen, und das machte keinen Unterschied. Vielleicht war es eine alte Browsersache ...

Sashaikevich

4

Schmutzig; Vielleicht könnten Sie einfach eine Mindesthöhe hinzufügen: 100%; zu den HTML- und Body-Tags? Das oder zumindest eine Standardhintergrundfarbe, die auch die Endverlaufsfarbe ist.

subv3rsion
quelle

1

Der Standardhintergrund, der als Endverlaufsfarbe festgelegt wurde, ist eine großartige Lösung, wenn der Verlauf gestoppt wird. Er stoppt jedoch nicht nur, sodass er wiederholt wird, sodass der Standardhintergrund nur angezeigt wird, wenn der Verlauf nicht unterstützt wird.

JD Isaacks

2

Ich hatte Probleme, die Antworten hier zum Laufen zu bringen.
Ich fand es besser, ein Div in voller Größe im Körper zu fixieren, ihm einen negativen Z-Index zu geben und den Gradienten daran zu befestigen.

<style>

  .fixed-background {
    position:fixed;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1000;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .blue-gradient-bg {
    background: #134659; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(top, #134659 , #2b7692); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom, #134659, #2b7692); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top, #134659, #2b7692); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, #134659 , #2b7692); /* Standard syntax */
  }

  body{
    margin: 0;
  }

</style>

<body >
 <div class="fixed-background blue-gradient-bg"></div>
</body>

Hier ist ein vollständiges Beispiel https://gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55

morefromalan
quelle

0

Ich habe diesen CSS-Code verwendet und er hat bei mir funktioniert:

html {
  height: 100%;
}
body {
  background: #f6cb4a; /* Old browsers */
  background: -moz-linear-gradient(top, #f2b600 0%, #f6cb4a 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2b600), color-stop(100%,#f6cb4a)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* IE10+ */
  background: linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2b600', endColorstr='#f6cb4a',GradientType=0 ); /* IE6-9 */
  height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  background-position: 0px 0px;
}

Eine verwandte Information ist, dass Sie unter http://www.colorzilla.com/gradient-editor/ Ihre eigenen großartigen Farbverläufe erstellen können.

/ Sten

Netsi1964
quelle

-1

background: #13486d; /* for non-css3 browsers */
background-image: -webkit-gradient(linear, left top, left bottom, from(#9dc3c3),   to(#13486d));  background: -moz-linear-gradient(top,  #9dc3c3,  #13486d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc3c3', endColorstr='#13486d');
background-repeat:no-repeat;

Joe
quelle

1

Bitte erläutern Sie die wichtigsten Aspekte Ihrer Lösung.

Rachcha

-1

das habe ich getan:

html, body {
height:100%;
background: #014298 ;
}
body {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c9cf2), color-stop(100%,#014298));
background: -moz-linear-gradient(top, rgba(92,156,242,1) 0%, rgba(1,66,152,1) 100%);
background: -o-linear-gradient(top, #5c9cf2 0%,#014298 100%);

/*I added these codes*/
margin:0;
float:left;
position:relative;
width:100%;
}

Bevor ich den Körper schwebte, gab es oben eine Lücke, die die Hintergrundfarbe von HTML zeigte. Wenn ich die HTML-Farbe von HTML entferne und nach unten scrolle, wird der Farbverlauf abgeschnitten. Also schwebte ich den Körper und stellte seine Position auf relativ und die Breite auf 100% ein. es funktionierte auf Safari, Chrom, Firefox, Oper, Internet Expl .. oh warte. : P.

Was denkt ihr?

grizzy
quelle

-4

statt 100% füge ich nur ein paar pixxel hinzu, habe das jetzt und es funktioniert für die ganze Seite ohne Lücke:

html {     
height: 1420px; } 
body {     
height: 1400px;     
margin: 0;     
background-repeat: no-repeat; }

SANDER
quelle

3

Was ist mit Seiten mit einer Höhe von> 1420 px?

Veritas

Der am Körper eingestellte CSS3-Verlaufshintergrund wird nicht gedehnt, sondern wiederholt?

Antworten: