cman.jp > WEBページ作成TOP > CSSリファレンス > 「背景画像の繰返し設定」
WEBページ作成
広告
background-repeat 「背景画像の繰返し設定」
background-repeat プロパティは背景画像の繰返し方法の設定を行うことができます。背景画像以外もまとめて背景を指定する場合は、backgroundを使用します。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 2.1 (※ 3.0で拡張) | 全て | しない |
広告
background-repeat の値
【構文】
background-repeat : [repeat] ;
| repeat [繰返しの指定] | |
|---|---|
| background: repeat; | 背景画像を繰り返して表示 |
| background: no-repeat; | 背景画像を１回のみ表示 |
| background: space; | 背景画像を繰り返して表示し サイズが合わない場合は空白で調整 |
| background: round; | 背景画像を繰り返して表示し サイズが合わない場合は画像を縮小して調整 |
background-repeat のサンプル
※ サンプル使用画像
| 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: 100px; height: 110px; }
/* 位置指定サンプル */
td.s1
{
background-image : url("./img/bg-img.png");
background-repeat : repeat;
}
td.s2
{
background-image : url("./img/bg-img.png");
background-repeat : no-repeat;
}
td.s3
{
background-image : url("./img/bg-img.png");
background-repeat : repeat-x;
}
td.s4
{
background-image : url("./img/bg-img.png");
background-repeat : repeat-y;
}
td.s5
{
background-image : url("./img/bg-img.png");
background-repeat : space;
}
td.s6
{
background-image : url("./img/bg-img.png");
background-repeat : round;
}
-->
</style>
</head>
<body>
<span style="font-size:11pt;" >繰返し指定サンプル</span>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th>repeat</th>
<th>no-repear</th>
<th>repeat-x</th>
<th>repeat-y</th>
<th>space</th>
<th>round</th>
</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>
</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-repeat : no-repeat, 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-size | 背景画像の表示サイズ設定 |
広告