CSS 背景関連

background-color

background-color


<span id="back1">background-color</span>
<style>
 #back1 {
  background-color: gray;
 }
</style>
red,black等の組み込み色、#0000ff等の16進数、rgb(255,0,0)・rgb(100%, 0%, 0%)等のRGB値

background-image

背景画像

back2

<p id="back2">back2</p>
<style>
 #back2 {
  background-image: url(~.gif);
  height: 300px;
 }
</style>

background-repeat

背景画像繰り返し

機能
repeat 規定。X方向、Y方向にリピート表示
no-repeat リピート無し
repeat-x X方向にリピート表示
repeat-y Y方向にリピート表示

back3

<p id="back3">back3</p>
<style>
 #back3 {
  background-image: url(~.gif);
  height: 300px;
  background-repeat: repeat-y;
 }
</style>

background-position

背景画像表示位置

機能
left 左寄せ
center 中央寄せ
right 右寄せ
top 上寄せ
bottom 下寄せ

back4

<p id="back4">back4</p>
<style>
 #back4 {
  background-image: url(~.gif);
  height: 250px;
  background-repeat: no-repeat;
  background-position: top right;
 }
</style>

background-attachment

背景画像固定

機能
fixed 固定
scroll スクロール

back5

<p id="back5">back5</p>
<style>
 #back5 {
  background-image: url(~.gif);
  height: 250px;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
 }
</style>

background

背景一括指定

~ {
 background: gray url(~.JPG) repeat-x center right scroll;

 ↓を個別に設定するのと同じ
 background-color: gray;
 background-image: url(~.JPG);
 background-repeat: repeat-x;
 background-position: center right;
 background-attachment: scroll;

}

CSS

次の記事

CSS margin/padding属性