CSSで背景を設定する方法

ホームページ制作で背景画像や背景色の設定をすることがあります。
背景の設定は主にCSSで行い、backgroundプロパティを使うことで様々な細かい設定をすることができます。

背景色を設定

背景色の設定には、background-colorプロパティを使います。色の設定は、カラーネーム、カラーコード、RGBなどで設定ます。
background-color: カラーネーム、カラーコード、RGB;

■カラーネーム
background-color: black;

■カラーコード
background-color: #2539;

■RGB
background-color: rgb(255, 255, 128);

背景画像の設定

背景画像の設定はに様々な設定方法があります。細かい設定をすることでデザインの幅を広げることが出来ます。

■背景画像の設定
background-image: url(画像のパス);

■背景画像をリピートさせない
background-repeat: no-repeat;

■背景画像を横方向にリピート
background-repeat: repeat-x;

■背景画像を縦方向にリピート
background-repeat: repeat-y;

■背景画像の位置指定
画像サイズの設定はbackground-positionプロパティを使います。
background-position: 横位置 縦位置;のそれぞれの位置に数値かコードを記述します。
background-position: 30px 60px;