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;
}