ページの背景全体にグラデーションをかける
CSSにてページの背景全体にグラデーションを設定する方法です。
ここではbody要素に上(色:#fff)から下(色:#ddd)にグラデーションを適用します。一応、グラデーションが効かないブラウザがあったときの対応として中間色(色:#eee)を代用として設定しています。
[CSS]
|
1 2 3 4 5 6 7 8 9 10 |
body { /* Firefox */ background: -moz-linear-gradient(top, #fff, #ddd); /* Chrome , Safari */ background: -webkit-linear-gradient(top, #fff, #ddd); /* IE11 */ background: linear-gradient(to bottom, #fff, #ddd); /* 代用 */ background-color: #eee; } |
[ブラウザ表示]※下記は画像です。
あまりないかと思いますが、そのページのコンテンツ量が少なく開いているブラウザの縦幅より少ない場合、グラデーションが切れて繰り返し表示されます。
[ブラウザ表示]※下記は画像です。
対応としてはhtml要素にmin-height: 100%;を設定しておくとブラウザ全体にグラデーションが適用されるようになり解消します。
[CSS]
|
1 2 3 |
html { min-height: 100%; } |
コンテンツ量が少ないページがある場合はこちらも適用しておいたほうがいいかもですね。