cman.jp > WEBページ作成TOP > CSSリファレンス > 「背景画像の表示位置の設定」
WEBページ作成
広告
background-position 「背景画像の位置設定」
background-position プロパティは背景画像の位置の設定を行うことができます。背景画像以外もまとめて背景を指定する場合は、backgroundを使用します。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 2.1 (※ 3.0で拡張) | 全て | しない |
広告
background-position の値
【構文】
background-position : [position] ;
| position [背景画像の位置指定] | |
|---|---|
| background: left; | 左寄せで配置（左右） |
| background: right; | 右寄席で配置（左右） |
| background: center; | 中央に配置（左右、上下） |
| background: top; | 上寄せで配置（上下） |
| background: bottom; | 下寄せで配置（上下） |
| background: ～% ～%; | 左右、上下の順で位置を割合で指定 [例] 0% 0% [左上寄せ]、50% 50% [中央寄せ] |
| background: ～px ～px; | 左から、上からの順で位置を距離で指定 [例] 30px 10px [左から30px、上から10px] |
background-position のサンプル
※ サンプル使用画像
| bg-img.png | bg-img2.png |
|---|---|
 |
 |
1.背景画像の位置指定サンプル
<html>
<head>
<title>背景画像サンプル（位置指定）</title>
<style type="text/css">
<!--
th { background: #00ff40; height: 35px; font-size: 10pt; }
td { width: 80px; height: 70px; }
/* 位置指定サンプル */
td.s1
{
background-position: center;
background-image : url("./img/bg-img.png");
background-repeat : no-repeat;
}
td.s2
{
background-position: right;
background-image : url("./img/bg-img.png");
background-repeat : no-repeat;
}
td.s3
{
background-position: top;
background-image : url("./img/bg-img.png");
background-repeat : no-repeat;
}
td.s4
{
background-position: bottom;
background-image : url("./img/bg-img.png");
background-repeat : no-repeat;
}
td.s5
{
background-position: right top;
background-image : url("./img/bg-img.png");
background-repeat : no-repeat;
}
td.s6
{
background-position: left bottom;
background-image : url("./img/bg-img.png");
background-repeat : no-repeat;
}
td.s7
{
background-position: 20% 80%;
background-image : url("./img/bg-img.png");
background-repeat : no-repeat;
}
td.s8
{
background-position: 40px 10px;
background-image : url("./img/bg-img.png");
background-repeat : no-repeat;
}
-->
</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="s1"></td>
<td class="s2"></td>
<td class="s3"></td>
<td class="s4"></td>
<td class="s5"></td>
<td class="s6"></td>
<td class="s7"></td>
<td class="s8"></td>
</tr>
</table>
</body>
</html>
2.背景画像の位置指定サンプル（複数画像）
<html>
<head>
<title>背景画像サンプル（複数画像）</title>
<style type="text/css">
<!--
th { background: #00ff40; height: 35px; font-size: 10pt; }
/* 背景画像サンプル（複数画像） */
td.s1
{
background-image : url("./img/bg-img2.png"),url("./img/bg-img.png");
background-position: left top, right bottom;
background-repeat : no-repeat, no-repeat;
width : 650px;
height : 100px;
}
-->
</style>
</head>
<body>
<span style="font-size:11pt;" >背景画像サンプル（複数画像）</span>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th>複数画像</th>
</tr>
<tr>
<td class="s1"></td>
</tr>
</table>
</body>
</html>| 関連するCSS(STYLE) | |
|---|---|
| background | 背景全般の設定 |
| background-attachment | 背景画像のスクロール |
| background-blend-mode | 背景をブレンド |
| background-clip | 背景画像の表示エリア |
| background-color | 背景色の設定 |
| background-image | 背景画像の設定 |
| background-origin | 背景画像の表示位置の基点 |
| background-repeat | 背景画像の繰返し設定 |
| background-size | 背景画像の表示サイズ設定 |
広告