Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

CSS辞典

トップページ
CSS辞典
background-repeat

background-repeat

背景画像の繰り返し方法を設定できます。

サンプルコード

style.css

/* 水平・垂直ともに繰り返し（初期値） */
div.test { background-repeat: repeat;}

/* 水平方向のみ繰り返し（ヘッダーの背景パターン等） */
div.test1 { background-repeat: repeat-x;}

/* 垂直方向のみ繰り返し（サイドバーの背景等） */
div.test2 { background-repeat: repeat-y;}

/* 繰り返しなし（ロゴや一枚絵の配置等） */
div.test3 { background-repeat: no-repeat;}

/* 均等に配置（余白を詰めて繰り返す） */
div.test4 { background-repeat: space;}

/* 均等に配置（画像を縮小して余白なく繰り返す） */
div.test5 { background-repeat: round;}

/* 水平方向はno-repeat、垂直方向はrepeat（新しい書き方） */
div.test6 { background-repeat: no-repeat repeat;}

/* アイコン画像を右上に1枚だけ表示する実践例 */
.badge {
	background-image: url("icon.png");
	background-repeat: no-repeat;
	background-position: right top;
	padding-right: 30px;
}

指定可能な値一覧

値	概要
repeat	水平方向、垂直方向に背景画像を繰り返し描画します。これが初期値です。
repeat-x	水平方向のみに繰り返し描画されます。
repeat-y	垂直方向のみに繰り返し描画されます。
no-repeat	背景画像の繰り返し描画をしません。背景画像は1回のみ描画されます。

ブラウザでの表示結果

※背景画像は以下を使用しています。

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: repeat;">高さ100px、パディング10pxのdiv要素です。ボーダーは『dashed 10px rgba(0, 0, 255, 0.5)』を指定しています。</div>

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: repeat-x;">高さ100px、パディング10pxのdiv要素です。ボーダーは『dashed 10px rgba(0, 0, 255, 0.5)』を指定しています。</div>

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: repeat-y;">高さ100px、パディング10pxのdiv要素です。ボーダーは『dashed 10px rgba(0, 0, 255, 0.5)』を指定しています。</div>

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-repeat: no-repeat;">高さ100px、パディング10pxのdiv要素です。ボーダーは『dashed 10px rgba(0, 0, 255, 0.5)』を指定しています。</div>