趣味でいろんな事やってます。今はテンプレートやカスタマイズ方法 HTML CSSについて書いています。『完成!』とか『クリア!』と達成感を味わいたい。 そんなこんなで へたのヨコズキ 趣味紹介ページです。
 
 
 
 
 
 
スポンサーサイト
 
 
【--/--/-- --:--】
 
 
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


 賞金クリックランキング ブログランキング・にほんブログ村へ FC2ブログランキング 人気ブログランキング
 
 
 
▲TOP
 
 
 
 
スタイルシートでの背景指定
 
 
【2006/03/21 17:03】
 
 
スタイルシートでの 背景の指定方法を書いています。

背景色を指定

background-color: 色指定

例)
body {
background-color: #ffffff
}


色指定には ”#000000”などカラーコードを入れてください
要素はbodyだけでなく tableやdivなどの背景も色指定できます。

背景画像を指定

background-image: url("背景画像のパス")

例)
body{
background-image: url("haikei.gif")
}


要素はbodyだけでなく tableやdivなどの背景も画像指定できます。

背景の固定

background-attachment: fixed

例)
body{
background-attachment: fixed
}


背景画像の繰り返し

background-repeat: repeat 全面に敷き詰める

background-repeat: repeat-x 横方向のみに繰り返し

画像位置はbackground-position-y: 上からの距離で指定できます。

例)
body {
background-image: url("haikei.gif");
background-repeat: repeat-x;
background-position-y: 500px
}

その他の指定方法上からの距離を%指定したり top、bottom、
のキーワードで指定できます。

background-repeat: repeat-y 縦方向のみに繰り返し
画像位置はbackground-position-x: 左からの距離で指定できます。

例)
body {
background-image: url("haikei.gif");
background-repeat: repeat-y;
background-position-x: 500px
}

その他の指定方法上からの距離を%指定したり left、center、right、
のキーワードで指定できます。

background-repeat: no-repeat 繰り返し無し
画像位置はbackground-position: 左からの距離 上からの距離で指定できます。(距離指定の間は半角スペースで区切ります。)

例)
body {
background-image: url("haikei.gif");
background-repeat: no-repeat;
background-position: 20px 30px
}


上の例だと左から20px上から30pxの位置に画像が表示されます。
一つだけ指定すると 左からの距離だけを指定した事になり縦方向の指示には50%となるようです。
指示方法は%、center、reft、right、top、bottomなどでも可能。

背景を一括して指定
background: 色指定 url("背景画像") 繰り返しの値 スクロール指定 画像位置

例)
body {
background: #ffffff url("haikei.gif") repeat-x fixed 30px 20px
}


一括指定することはできますが 修正する時は間違えないように気を付けてください
スポンサーサイト

 賞金クリックランキング ブログランキング・にほんブログ村へ FC2ブログランキング 人気ブログランキング
HP作成 >> コンピュータ
 
 
 
▲TOP
 
 
 
 
この記事に対するコメント
 
 
承認待ちコメント
このコメントは管理者の承認待ちです
【2009/01/21 07:22】 URL | # [ 編集]

 
 
 
▲TOP

 
 
 
 
この記事に対するコメント投稿
 
 















 
 
 
▲TOP

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。