W3QはBiztterに生まれ変わりました!
Web制作に関するお悩みはBiztterへどうぞ!

Biztterで質問する

ID:OsJXrs さんの質問

CSSで背景にグラデーションをかけたい時。
bodyにグラデーションを指定したのですが、スクロールが発生する時、グラデーションが途切れてしまうことがあります。
背景を固定させる以外の方法で、ページ全体にグラデーションを適用させる方法はありますか?
(高さ100%を指定してもダメでした。コンテンツサイズは可変になるのでピクセルなどでの高さ指定はできません)

みんなの回答 4 件

ID:qqp0B4 さんの回答

body直下に全体を囲む要素を配置して、position:absolute; top:0;bottom:0; left:0;right:0;みたいにしてもだめかな。

ID:OsJXrs

むむ…ブラウザを開いた時の初期高さまではばっちりグラデーションがかかってるのですが、スクロールするとやはり初期高さを超えた時点でグラデーションが繰り返されております…。
面倒ですが、背景を2枚重ねて、上に来るグラデーションの色を透過させるしかないですかねー…。
こんな感じに…
background: rgba(250, 250, 250, 0.5), -webkit-gradient(linear, center top, center bottom, from (rgba(210, 210, 210, 0.5)), to(rgba(250, 250, 250, 0)));

ID:OsJXrs さんの回答

ちなみに、body要素って背景の指定は一つしかできないんでしょうか?
body {
  background: rgba(210, 210, 210, 0.5), url(background.jpg);}
これで両方指定しようとしたんですが、画像しか出なかったです。
画像を消すと背景色が出てきます。

ID:qqp0B4

最近のブラウザなら複数背景指定できますよ。
background.jpgで背景色が上書きされてんじゃないかな。順番かえてみたら?

ID:OsJXrs

ですよねー…最新バージョンのChromeで見たんですがダメで…。
順番はこのままで、色の部分をグラデーション(↓)にしたらできました。
-webkit-gradient(linear, center top, center bottom, from(rgba(210, 210, 210, 0.5)), to(rgba(210, 210, 210, 0.5))), url(background.jpg)
グラデーションしてないので無駄なんですけども…。
うーん…。

ID:FFwtnp

文法が間違ってる。色と画像の間にカンマはいらない。

ID:0nasji さんの回答

こんなんでいいならできましたけど(Chromeしか見てないので、あとは自分で調整してください)

背景画像とグラデ - jsdo.it - Share JavaScript, HTML5 and CSS

http://jsdo.it/Ituki/na9a
ID:OsJXrs

おー…CSSでの方法を探していたので、こちらはちょっと使えないですね。
わざわざありがとうございます。

ID:0nasji

あ、jsは高さの変更を擬似的に作っているだけなので、CSS部分だけ使っていただければ。

ID:dO.6YR さんの回答

途中で切れるとはどういう状況なのでしょうか。
キャプチャとかあればわかりやすいのですが。
スクロールしたら消えるのは、描写されてないからかもしれません。
グラデーションに限らず、画像でもなるのですが、外側の要素にmin-width指定してあげると直ります。

【CSS】意外と知られていない!横幅100%の背景が切れるバグ - 世界を変えるのはブルペンキャッチャー

http://sekabull.hatenablog.jp/entry/2013/08/07/105412
最終更新日:2014-08-03 (5,107 views)

関連するトピックス

ページ上部に戻る