window


この質問記事は取消希望されています。
トップページ > 記事閲覧
*グラデーション背景をページのフルサイズでの表示方法について
日時: 2009/06/16 04:50
識別: ID:W0ZQuXG1UOb.
名前: 初心者K  <murakami@you-carry.com>
はじめて質問いたします。
HP作成初心者でCSSの設定やその他てこずってます

すみません、教えてください。
背景の画像をグラデーションで作成しました(サイズ:横1000px縦2px)
これをスタイルスタイルシートの設定で垂直100%にして表示したところ
右側に余白ができてしまします・・・・・
4方向マージン?を0にして・・とやっても右側に余白ができてしまうのですが
これを防ぐ方法は何かありませんでしょうか?
初心者の質問ですみません。
是非教えてください。

宜しく御願いします。
メンテ

Re: グラデーション背景をページのフルサイズでの表示方法について ( No.1 )
日時: 2009/06/16 09:32
名前:

文章じゃ全然原因がわからないので、やってみたソースのうpを。HTMLとCSSの両方。

ついでに情報足りなさすぎるので補足を。

・ブラウザの種類は何か。複数のブラウザで試してみたか。
・モニタサイズというかブラウザサイズいくつだい。
・「背景画像を垂直100%(に拡大)」っていうのはそもそも無理。
 (現在策定中のCSS3ならできるが、先行実装のみなので割愛)
・「背景画像を縦に繰り返す(repeat)」ならまだわかる。
・「余白」はどのくらいの幅か。

グラデーションの終端の色をbackground-colorで指定するのが常套手段だろうか。縦2pxだから、斜めにグラデーションかけてるってことはないだろうし。ただしソースがないので勘。
メンテ
Re: グラデーション背景をページのフルサイズでの表示方法について ( No.2 )
日時: 2009/07/07 18:00
名前: 通りすがり2

横1000px×縦2pxのグラデーション画像を垂直に繰り返しても、PCスクリーンは横1024px×縦768px(一般的サイズ)なので、24px分だけ余白が出来てしまうわけです。

だからと言って、水平方向に繰り返すと、右余白にグラデーション画像の左端が見えてしまいます。

結果として、市販されているPCの、1番大きいスクリーンに合わせたグラデーション画像を挿入するのが間違いない選択方法かもしれません。

<style>
<!--
body{background-image:url(image.gif);
background-repeat:repeat-y;
}
-->
</style>
ってな感じ!
メンテ
- ( No.3 )
日時: 2011/12/06 22:12
名前: d251.osa20nn1fm11.vectant.ne.jp

#SPAM

メンテ
- ( No.4 )
日時: 2012/06/16 23:53
名前: 7c294cd1.i-revonet.jp

#SPAM

メンテ

 返信フォーム (上記スレッドに返信する場合は以下のフォームから投稿します)
題名 ※必須 スレッドをトップへソート
名前
E-Mail
URL
パスワード 記事メンテ時に使用します (メンテは該当記事のメンテアイコンをクリック)
返信内容
※必須
エラーメッセージや内容などは省略せず詳細にご記入下さい
状態の設定

・問題が解決したら 解決 を選択して投稿して下さい HELP(新しいウィンドウが開きます)
・既存記事の状態設定はメンテ(メンテアイコン)から修正する事ができます。


投稿内容をご確認下さい(記事の削除は出来ません)

   クッキー保存