cman.jp > WEBページ作成TOP > CSSリファレンス > 「背景全般の設定」
WEBページ作成
広告
background 「背景の設定」
background プロパティは背景に関する設定をまとめて行うことができます。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 2.1 (※ 3.0で拡張) | 全て | しない |
広告
background の値
| color [背景色の指定] ( サンプル ) | |
|---|---|
| background: #rrggbb; | 16進数RGB指定 [例] #00ffff、#660033 (色作成) |
| background: カラー名; | カラー名指定 [例] red、bule (一覧) |
| background: rgb(r, g, b); | 10進数RGB指定 [例] rgb(0,255,255) (色作成) |
| background: rgba(r, g, b, a); | 透明度付きRGB指定 [例] rgba(0,255,255,0.5) (色作成) ※ CSS3の機能 |
| background: hsl(h, l%, s%); | HSL指定 [例] hsl(10,50%,90%) (色作成) |
| background: hsla(h, l%, s%, a); | 透明度付きHSL指定 [例] hsla(0,30%,25%,0.5) (色作成) ※ CSS3の機能 |
| background: transparent; | 透明（無色） |
| image [背景画像の指定] ( サンプル ) | |
| background: url([画像へのパス]); | [例] url("../image/back.gif") カンマで区切ることで、画像を複数指定することもできます。 |
| repeat [繰返しの指定] ( サンプル ) | |
| background: repeat; | 背景画像を繰り返して表示 |
| background: no-repeat; | 背景画像を１回のみ表示 |
| background: space; | 背景画像を繰り返して表示し サイズが合わない場合は空白で調整 |
| background: round; | 背景画像を繰り返して表示し サイズが合わない場合は画像を縮小して調整 |
| attachment [背景画像のスクロール指定] ( サンプル ) | |
| background: fixed; | 背景画像を固定 |
| background: scroll; | 背景画像を画面にあわせてスクロール(初期値) |
| background: local; | 背景画像を画面にあわせてスクロール。 子要素に対して指定した場合は子要素に対してもスクロール |
| background: inherit; | 親要素の値を継承 |
| position [背景画像の位置指定] ( サンプル ) | |
| background: left; | 左寄せで配置（左右） |
| background: right; | 右寄席で配置（左右） |
| background: center; | 中央に配置（左右、上下） |
| background: top; | 上寄せで配置（上下） |
| background: bottom; | 下寄せで配置（上下） |
| background: ～% ～%; | 左右、上下の順で位置を割合で指定 [例] 0% 0% [左上寄せ]、50% 50% [中央寄せ] |
| background: ～px ～px; | 左から、上からの順で位置を距離で指定 [例] 30px 10px [左から30px、上から10px] 参照：CSSの長さ、大きさの単位 |
| size [背景画像の大きさ指定] ( サンプル ) ※ CSS3の機能 | |
| background: auto; | 自動(初期値) |
| background: ～% ～%; | 背景領域に対する割合を幅、高さの順で指定 (幅もしくは高さを「auto」で指定する事も可) |
| background: ～px ～px; | 背景画像のサイズを幅、高さの順で指定 (幅もしくは高さを「auto」で指定する事も可) 参照：CSSの長さ、大きさの単位 |
| background: contain; | 背景領域に収まる最大サイズ指定（縦横比保持） |
| background: cover; | 背景領域が全て隠れるサイズ指定（縦横比保持） |
background のサンプル
※ サンプル使用画像
| bg-img.png | bg-img2.png |
|---|---|
 |
 |
1.背景色の指定
<html>
<head>
<title>背景色サンプル</title>
<style type="text/css">
body { background: #abe1fa; } /* 全体:淡青色 */
h1 { background: rgb(236,0,140); } /* 見出し1：紅紫色 */
th.s1-1 { background: #fff450; } /* 見出しセル1:檸檬色 */
th.s1-2 { background: rgb(255,244,80); } /* 見出しセル2:檸檬色 */
td.s1-1 { background: #9dd29c; } /* セル1:若緑 */
td.s1-2 { background: transparent; } /* セル2:透過 */
td.s2-1 { background: rgba(255,0,0,0.0); } /* 透過1:赤(透過率0.0) */
td.s2-2 { background: rgba(255,0,0,0.2); } /* 透過2:赤(透過率0.2) */
td.s2-3 { background: rgba(255,0,0,0.4); } /* 透過3:赤(透過率0.4) */
td.s2-4 { background: rgba(255,0,0,0.6); } /* 透過4:赤(透過率0.6) */
td.s2-5 { background: rgba(255,0,0,0.8); } /* 透過5:赤(透過率0.8) */
td.s2-6 { background: rgba(255,0,0,1.0); } /* 透過6:赤(透過率1.0) */
</style>
</head>
<body>
<h1>見出し１（紅紫色）</h1>
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<th class="s1-1">見出しセル１（檸檬色）</th>
<th class="s1-2">見出しセル２（檸檬色）</th>
</tr>
<tr>
<td class="s1-1">セル１（若緑）</td>
<td class="s1-2">セル２（透過）</td>
</tr>
</table>
<br>
<span style="font-size:14pt;" >透過サンプル（CSS3 RGBA対応ブラウザのみ）</span>
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<td class="s2-1">透過1<br>(透過率 0.0)</td>
<td class="s2-2">透過2<br>(透過率 0.2)</td>
<td class="s2-3">透過3<br>(透過率 0.4)</td>
<td class="s2-4">透過4<br>(透過率 0.6)</td>
<td class="s2-5">透過5<br>(透過率 0.8)</td>
<td class="s2-6">透過6<br>(透過率 1.0)</td>
</tr>
</table>
</body>
</html>
2.繰返し指定サンプル
<html>
<head>
<title>背景画像サンプル（繰返し）</title>
<style type="text/css">
<!--
th { background: #00ff40; height: 35px;}
td { width: 80px; height: 70px; }
/* 繰返し指定サンプル */
td.s3-1 { background: url("./img/bg-img.png"); }
td.s3-2 { background: url("./img/bg-img.png") no-repeat; }
td.s3-3 { background: url("./img/bg-img.png") space; }
td.s3-4 { background: url("./img/bg-img.png") round; }
-->
</style>
</head>
<body>
<span style="font-size:11pt;" >繰返し指定サンプル</span>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th >default</th>
<th>no-repear</th>
<th>space</td>
<th>round</td>
</tr>
<tr>
<td class="s3-1"></td>
<td class="s3-2"></td>
<td class="s3-3"></td>
<td class="s3-4"></td>
</tr>
</table>
</body>
</html>3.位置指定サンプル
<html>
<head>
<title>背景画像サンプル（位置指定）</title>
<style type="text/css">
<!--
th { background: #00ff40; height: 35px;}
td { width: 80px; height: 70px; }
/* 位置指定サンプル */
td.s4-1 { background: url("./img/bg-img.png") no-repeat center; }
td.s4-2 { background: url("./img/bg-img.png") no-repeat right; }
td.s4-3 { background: url("./img/bg-img.png") no-repeat top; }
td.s4-4 { background: url("./img/bg-img.png") no-repeat bottom; }
td.s4-5 { background: url("./img/bg-img.png") no-repeat right top; }
td.s4-6 { background: url("./img/bg-img.png") no-repeat left bottom; }
td.s4-7 { background: url("./img/bg-img.png") no-repeat 20% 80%; }
td.s4-8 { background: url("./img/bg-img.png") no-repeat 40px 10px; }
-->
</style>
</head>
<body>
<span style="font-size:11pt;" >位置指定サンプル</span>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th >center</th>
<th>right</th>
<th>top</td>
<th>bottom</td>
<th>right<br>top</td>
<th>left<br>bottom</td>
<th>20% 80%</td>
<th>40px 10px</td>
</tr>
<tr>
<td class="s4-1"></td>
<td class="s4-2"></td>
<td class="s4-3"></td>
<td class="s4-4"></td>
<td class="s4-5"></td>
<td class="s4-6"></td>
<td class="s4-7"></td>
<td class="s4-8"></td>
</tr>
</table>
</body>
</html>4.サイズ指定サンプル
<html>
<head>
<title>背景画像サンプル（サイズ指定）</title>
<style type="text/css">
<!--
th { background: #00ff40; height: 35px;}
td { width: 80px; height: 70px; }
/* サイズ指定サンプル */
td.s5-1 { background: url("./img/bg-img.png") no-repeat center/auto; }
td.s5-2 { background: url("./img/bg-img.png") no-repeat center/50% 80%; }
td.s5-3 { background: url("./img/bg-img.png") no-repeat center/50px 20px; }
td.s5-4 { background: url("./img/bg-img.png") no-repeat center/contain; }
td.s5-5 { background: url("./img/bg-img.png") no-repeat center/cover; }
td.s5-6 { background: url("./img/bg-img.png") no-repeat left top/20px 50px; }
td.s5-7 { background: url("./img/bg-img.png") no-repeat 20% 80%/50px 60px; }
td.s5-8 { background: url("./img/bg-img.png") no-repeat 0px 0px/100% 50%; }
-->
</style>
</head>
<body>
<span style="font-size:11pt;" >画像サイズ指定サンプル</span>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th>auto</th>
<th>50% 80%</th>
<th>50px 20px</td>
<th>contain</td>
<th>cover</td>
<th>20px 50px<br><span style="font-size:8pt">(+位置指定)</span></td>
<th>50px 60px<br><span style="font-size:8pt">(+位置指定)</td>
<th>100% 50%<br><span style="font-size:8pt">(+位置指定)</td>
</tr>
<tr>
<td class="s5-1"></td>
<td class="s5-2"></td>
<td class="s5-3"></td>
<td class="s5-4"></td>
<td class="s5-5"></td>
<td class="s5-6"></td>
<td class="s5-7"></td>
<td class="s5-8"></td>
</tr>
</table>
</body>
</html>5.背景画像スクロール指定サンプル(スクロール)
<html>
<head>
<title>背景画像スクロール指定サンプル（スクロール）</title>
<style type="text/css">
<!--
/* 背景画像スクロール指定サンプル（scroll） */
body { background: url("./img/bg-img2.png") no-repeat scroll right top; }
-->
</style>
</head>
<body>
<span style="font-size:12pt; " >画像スクロール指定サンプル（スクロール）</span>
<p>
01行目<br>
02行目<br>
03行目<br>
04行目<br>
05行目<br>
06行目<br>
07行目<br>
</p>
</body>
</html>6.背景画像スクロール指定サンプル(固定)
<html>
<head>
<title>背景画像スクロール指定サンプル（固定）</title>
<style type="text/css">
<!--
/* 背景画像スクロール指定サンプル（fixed） */
body { background: url("./img/bg-img2.png") no-repeat fixed right top; }
-->
</style>
</head>
<body>
<span style="font-size:12pt; " >画像スクロール指定サンプル（固定）</span>
<p>
01行目<br>
02行目<br>
03行目<br>
04行目<br>
05行目<br>
06行目<br>
07行目<br>
</p>
</body>
</html>| 関連するCSS(STYLE) | |
|---|---|
| background-attachment | 背景画像のスクロール |
| background-blend-mode | 背景をブレンド |
| background-clip | 背景画像の表示エリア |
| background-color | 背景色の設定 |
| background-image | 背景画像の設定 |
| background-origin | 背景画像の表示位置の基点 |
| background-position | 背景画像の表示位置の設定 |
| background-repeat | 背景画像の繰返し設定 |
| background-size | 背景画像の表示サイズ設定 |
| 関連するHTMLタグ | |
|---|---|
| frame | フレームの設定 |
広告