人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

携帯サイトで質問です。
下記の様な背景いっぱいをグラデーションにするには
どうすればいいでしょうか?

http://blog.livedoor.com/mobile_design/simplewhite.html

下記では解決できませんでした。
background:url(img/gra.gif) repeat-x;
repeat-xが利かずに、横だけでなく、縦までが画像がいっぱいになり、めちゃくちゃになりました。

●質問者: makocan
●カテゴリ:インターネット ウェブ制作
✍キーワード:AT-X background GIF URL グラデーション
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● きあ
●35ポイント

body { }内に入れていますよね?閉じかっこもありますよね?

1行でできないならとりあえず2行で書いてみるのも手ですよ。

とりあえず全パターンあげてみました。

1行で表示するなら。

全面表示

body {

background-image: url(img/bg.jpg);

}

以下は{}内だけ

x方向のみ

background:url(img/gra.gif) repeat-x;

y方向のみ

background:url(img/gra.gif) repeat-y;

Repeatなし

background:url(img/gra.gif) no-repeat;

2行でいいなら、

x方向のみ

background-image: url(img/gra.gif);

background-repeat: repeat-x;

y方向のみ

background-image: url(img/gra.gif);

background-repeat: repeat-y;

Repeatなし

background-image: url(img/gra.gif);

background-repeat: no-repeat;

http://hac-design.com/css/background.html


2 ● きあ
●35ポイント

作ってみました。ほんと背景入れただけなんですが良ければどうぞ。

画像は質問にあるサイトの背景を拝借しました。

PCでみるならこっち

http://memo.bz/up/aa.html

携帯確認用のQR

http://memo.bz/up/qr.jpg

jpegとhtmlのzip

http://memo.bz/up/aa.zip

こちらはSoftBankの830CAで確認しました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ