« カスタムCSSについて(余白・レイアウト) | メイン | 記事フッターの各サービスリンクをボタン表示にする »

カスタムCSSについて(背景)

カスタムCSSでカスタマイズをするときに便利な「背景」に関係するプロパティを紹介します。

background(バックグラウンド)

backgroundとは、背景に関する値を指定するプロパティです。
ブログの背景画像や背景色の指定は、このプロパティが使用されています。

background背景に関する値を一括指定する
background-color背景色を指定する
background-image背景画像を指定する
background-repeat背景画像の繰り返し方法を指定する
background-position背景画像の位置を指定する
background-attachment背景画像を固定するか移動させるかを指定する

【使用例】
bodyに、画像「aaa.jpg」繰り返しせず左上固定で表示させる。

body {
   
background-image: url(http://●●●/img/aaa.jpg);
   
background-repeat: no-repeat;
   
background-position: left top;
   
background-attachment: fixed;
}



参考までに、各プロパティの設定値をご紹介します。

【background-repeat】

repeat垂直水平方向に繰り返し表示background-repeat: repeat;
repeat-x水平方向のみ繰り返し表示background-repeat: repeat-x;
repeat-y垂直方向のみ繰り返し表示background-repeat: repeat-y;
no-repeat繰り返しなしbackground-repeat: no-repeat;

【background-position】

top上寄せで背景画像を表示
background-position: top;
bottom下寄せで背景画像を表示
background-position: bottom;
right右寄せで背景画像を表示
background-position: right;
left左寄せで背景画像を表示
background-position: left;
center中央に背景画像を表示
background-position: center;

【background-attachment】

fixed背景画像を固定する
background-attachment: fixed;
scrollスクロールで背景画像が移動する
background-attachment: scroll;