cman.jp > WEBページ作成TOP > CSSリファレンス > 「背景画像の表示サイズ設定」
WEBページ作成
広告
background-size 「背景画像の表示サイズ設定」
background-size プロパティは背景画像の表示サイズの設定を行うことができます。背景画像以外もまとめて背景を指定する場合は、backgroundを使用します。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 3.0 | 全て | しない |
広告
background-size の値
【構文】
background-size : [size] ;
| size [背景画像の大きさ指定] ※ CSS3の機能 | |
|---|---|
| background: auto; | 自動(初期値) |
| background: ～% ～%; | 背景領域に対する割合を幅、高さの順で指定 (幅もしくは高さを「auto」で指定する事も可) |
| background: ～px ～px; | 背景画像のサイズを幅、高さの順で指定 (幅もしくは高さを「auto」で指定する事も可) |
| background: contain; | 背景領域に収まる最大サイズ指定（縦横比保持） |
| background: cover; | 背景領域が全て隠れるサイズ指定（縦横比保持） |
background-size のサンプル
※ サンプル使用画像
| bg-img.png | bg-img2.png |
|---|---|
 |
 |
1.背景画像のサイズ指定サンプル
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>背景画像サンプル（サイズ指定）</title>
<style type="text/css">
<!--
th { background: #00ff40; height: 35px; font-size: 10pt; }
td { width: 80px; height: 70px; }
/* 位置指定サンプル */
td.s1
{
background-size : auto;
background-image : url("./img/bg-img.png");
background-repeat : no-repeat;
}
td.s2
{
background-size : 50% 80%;
background-image : url("./img/bg-img.png");
background-repeat : no-repeat;
}
td.s3
{
background-size : 50px 20px;
background-image : url("./img/bg-img.png");
background-repeat : no-repeat;
}
td.s4
{
background-size : contain;
background-image : url("./img/bg-img.png");
background-repeat : no-repeat;
}
td.s5
{
background-size : cover;
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>auto</th>
<th>50% 80%</th>
<th>50px 20px</th>
<th>contain</th>
<th>cover</th>
</tr>
<tr>
<td class="s1"></td>
<td class="s2"></td>
<td class="s3"></td>
<td class="s4"></td>
<td class="s5"></td>
</tr>
</table>
</body>
</html>
2.背景画像の位置指定サンプル（複数画像）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>背景画像サンプル（複数画像）</title>
<style type="text/css">
<!--
th { background: #00ff40; height: 35px; font-size: 10pt; }
/* 背景画像サンプル（複数画像） */
td.s1
{
background-image : url("./img/bg-img.png"), url("./img/bg-img2.png");
background-size : 50px 50px, 98% 80%;
background-position: right bottom, left top;
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-position | 背景画像の表示位置の設定 |
| background-repeat | 背景画像の繰返し設定 |
広告