web-dev-qa-db-ja.com

体に設定されたCSS3グラデーションの背景は伸びないが代わりに繰り返す？

<body>内のコンテンツの高さは合計300pxです。

<body>または-webkit-gradientを使用して-moz-linear-gradientの背景を設定した場合

それから私は自分のウィンドウを最大化し（あるいは単に300pxよりも高くする）、グラデーションは正確に300pxの高さ（コンテンツの高さ）になり、そしてウィンドウの残りを埋めるために繰り返すだけです。

Webkitでもgeckoでも同じであるため、これはバグではないと思います。

しかし、繰り返しではなく、グラデーションをウィンドウいっぱいに広げる方法はありますか。

csscss3gradient
391
JD Isaacks

次のCSSを適用してください。

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

編集： コメントごとにボディ宣言にmargin: 0;を追加しました（ Martin ）。

編集： コメントごとにボディ宣言にbackground-attachment: fixed;を追加しました（ Johe Green ）。

648
Bryan Downing

以前の回答に関しては、コンテンツをスクロールする必要がある場合は、htmlとbodyをheight: 100%に設定してもうまくいきません。背景にfixedを追加することでそれが修正されるようです - no need for height: 100%;

例えば。：

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

これは私がこの問題を解決するためにしたものです...それは内容の全長のためにグラデーションを示して、その後背景色（通常グラデーションの最後の色）にフォールバックするでしょう。

   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>

FireFox 3.6、Safari 4、およびChromeでこれをテストしました。何らかの理由でHTMLタグのスタイル設定をサポートしていないブラウザでは、本体の背景色をそのままにしています。

15
John Sanford

html { height: 100%}を設定すると、IEに大混乱をもたらす可能性があります。 これは一例です（png）。 しかし、あなたは何が素晴らしいのか知っていますか？背景を<html>タグに設定するだけです。

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

背景が下まで広がり、奇妙なスクロール動作は発生しません。他の修正はすべてスキップできます。そしてこれは広く支持されています。 htmlタグに背景を適用させないブラウザが見つかりませんでした。これは完全に有効なCSSであり、しばらく前からあります。 :)

13
Justin Force

このページには多くの部分的な情報がありますが、完全なものではありません。これが私がしていることです：

  1. ここにグラデーションを作成します。 http://www.colorzilla.com/gradient-editor/ /
  2. BODYではなくHTMLにグラデーションを設定します。
  3. HTMLの背景を "background-attachment：fixed;"で修正します。
  4. BODYの上下の余白をオフにする
  5. （オプション）私は通常<DIV id='container'>を作成し、そこに私のすべてのコンテンツを入れます。

これが一例です。

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;
}

これはIE、Chrome、Firefoxでさまざまなサイズのページとスクロールの必要性についてテストされています。

12
Rick Smith

私はパーティーに遅刻していることを知っています、しかしここにもっとしっかりした答えがあります。

あなたがする必要があるのはmin-height: 100%;ではなくheight: 100%;を使うことだけです、そしてあなたのグラデーション背景は内容がスクロール可能であっても、繰り返すことなくビューポートの全高を広げます。

このような：

html {
    min-height: 100%;
}

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

汚れた;たぶんあなただけの最小の高さを追加することができます：100％。 HTML、およびボディタグに？それ、または少なくとも最後のグラデーションカラーであるデフォルトの背景色を設定します。

3
subv3rsion

私はここで答えを得るのに苦労しました。
私は、体の中のフルサイズのdivを修正し、それに負のzインデックスを与え、そしてそれに勾配を付けることがよりうまくいったことを見つけました。

<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>

これがフルサンプルです。 https://Gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55

2
morefromalan

私はこのCSSコードを使用しました、そしてそれは私のために働きました：

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;
}

関連情報は、 http://www.colorzilla.com/gradient-editor/ であなた自身の素晴らしいグラデーションを作成できるということです。

/ステン

0
Netsi1964