トップ > スキル : Web > CSSリファレンス

Web

各CSSのプロパティ詳細6

背景関係

background-color、background-image、background-repeat、background-position、background-attachment、background

背景色を指定する

background-color:色指定

background-colorプロパティは、背景の色を指定します。値は、カラーコードや色名などで指定します。また、値に「transparent」を指定すると、背景が透明になって下の背景が透けて見えるようになります。ただ、ボックスのマージン(常に透明)には適用されません。
背景色を決める時は、前景色となる文字の色を考慮しておかなければ、文字が見えにくくなります。

カラーコードで指定 #000000~#FFFFFF または#000~#FFF
色名 red(赤)、blue(青)など
透明 transparent

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	body { background-color:#ffccff;}
        	p { padding:10px;}
        	.type1 { background-color:yellow;}
            .type2 { background-color:#9f0;}
            .type3 { background-color:#99cfcf;}
    	</style>
    

HTML

    	<body>
    	<p class="type1">背景色1</p>
    	<p class="type2">背景色2</p>
        <p class="type3">背景色3</p>
        </body>
    
背景色指定

背景に画像を指定する

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

background-imageプロパティは、背景の画像を指定します。背景色と同様に、ここで設定した画像はボックスのマージン(常に透明)には適用されません。環境によっては画像が表示されない場合もありますので、必ず背景色も同時に指定しておくと良いです。
また、background-repeatを一緒に指定していない場合は、指定した画像はボックス全面に繰り返し(タイル状に)表示されます。

画像URL 絶対パスまたは相対パスで指定

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	body { background-image:url(orange.png);}
        	p { padding:15px;}
        	.type1 { background-image:url(red.png);
            		 background-color:#fff;}
            .type2 { background-image:url(green.png);
            		 background-repeat:no-repeat;}
            .type3 { background-image:url(blue.png);}
    	</style>
    

HTML

    	<body>
    	<p class="type1">背景画像1</p>
    	<p class="type2">背景画像2</p>
        <p class="type3">背景画像3</p>
        </body>
    
背景画像指定

画像の並び方を指定する

background-repeat:並び方

background-repeatプロパティは、背景画像の並び方(繰り返し方法)を指定します。通常は、background-imageプロパティと同時に指定します。

全面にタイル状に繰り返し表示(初期値) repeat
横方向のみ繰り返し表示 repeat-x
縦方向のみ繰り返し表示 repeat-y
繰り返さないで表示 no-repeat

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	body { text-align:center;}
            p { padding:15px;
            	background-image:url(back.png);
                background-color:#fff;
                border:1px solid #000; }
        	.type1 { background-repeat:repeat-x;}
            .type2 { background-repeat:repeat-y;}
            .type3 { background-repeat:no-repeat;}
    	</style>
    

HTML

    	<body>
    	<p class="type1">画像は横方向</p>
        <p class="type2">画像は縦方向</p>
        <p class="type3">画像は繰り返さない</p>
        </body>
    
背景画像の並び方指定

画像の表示位置を指定する

background-position:表示位置

background-positionプロパティは、背景画像が指定された場合の画像の表示位置を指定します。
単位付きの数値+%で指定された場合は、横位置・縦位置の順に半角スペースで区切って指定します。値が一つしなかった場合は、横位置が指定されたことになり、その場合の縦位置は「50%」の位置になります。
単位付きの数値で指定した場合は、領域の左上から画像の左上までの距離を指定します。また、キーワードを値とした場合は、「left」、「top」は「0%」、「right」と「bottom」は「100%」、「center」は「50%」を指定した結果と同じとなります。これらは順不同で指定できますが、一つしか指定しなかったらもう片方は「center」になります。

キーワードで指定 left(左)、right(右)、top(上)、bottom(下)
ボックスの左上からの位置を数値で指定 px
ボックスの左からの位置を割合から指定 %

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	body { text-align:center;}
            p { padding:15px;
            	background-image:url(green.png);
                background-repeat:no-repeat;
                border:1px solid #000;}
        	.type1 { background-position:100% 0;}
            .type2 { background-position:center center;}
            .type3 { background-position:bottom left;}
    	</style>
    

HTML

    	<body>
    	<p class="type1">画像は右上</p>
        <p class="type2">画像は中央</p>
        <p class="type3">画像は左下</p>
        </body>
    
画像表示位置指定

背景画像を固定する

background-attachment:固定の可否

background-attachmentプロパティは、背景画像が指定された場合に、その画像をウィンドウの指定したその位置に固定するか、他の内容とともにスクロールさせるかを指定します。

背景画像を固定 fixed
スクロールと一緒に移動させる scroll(初期値)

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	body { background-image:url(logo.png);
            	   background-repeat:no-repeat;
                   background-position:left top;
                   background-attachment:fixed;}
            h1,p { text-align:right;
            	   line-height:2em;}
    	</style>
    

HTML

    	<body>
        <h1>HTML5</h1>
    	<p>HTML5とCSS3は<br />いろいろなことが可能となりました。</p>
        <p>このより斬新なデザイン作りが可能となったことで、<br />
        よりデザイナーの創造力が<br />引き出せることになるでしょう</p>
        </body>
    
背景画像固定1

スクロールバーを下に移動しても、左の背景画像は固定されて表示されます。

背景画像固定2

背景関係をまとめて指定する

background:背景関係のプロパティの値

backgroundプロパティは、背景関連のプロパティの値をまとめて指定します。必要な値を任意の順序で半角スペースで区切って指定します。複数の値をまとめて指定することによって、CSSの記述を減らすことができシンプルになる。

backgroundプロパティ

■ サンプルコードと結果

CSS

    	<style type="text/css">
        	body { text-align:center;}
            p { padding:15px;
            	border:1px solid #000;}
            .type1 { background:#ccffcc;}
            .type2 { background:#fff url(back.png) top center no-repeat;}
    	</style>
    

HTML

    	<body>
    	<p class="type1">背景色のみ</p>
        <p class="type2">画像を上中央に1つ</p>
        </body>
    
背景画像まとめて指定

【各CSSのプロパティ詳細6】