Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
background-repeat

background-repeat

Specifies how the background image is repeated.

Sample Code

style.css

/* Repeat both horizontally and vertically (default) */
div.test { background-repeat: repeat;}

/* Repeat only horizontally (e.g., header background pattern) */
div.test1 { background-repeat: repeat-x;}

/* Repeat only vertically (e.g., sidebar background) */
div.test2 { background-repeat: repeat-y;}

/* No repeat (e.g., placing a logo or single illustration) */
div.test3 { background-repeat: no-repeat;}

/* Space: tile with even gaps, no clipping */
div.test4 { background-repeat: space;}

/* Round: scale image to fit without gaps */
div.test5 { background-repeat: round;}

/* Separate values for horizontal and vertical (new syntax) */
div.test6 { background-repeat: no-repeat repeat;}

/* Practical example: display one icon in the top-right corner */
.badge {
	background-image: url("icon.png");
	background-repeat: no-repeat;
	background-position: right top;
	padding-right: 30px;
}

Available Values

Value	Description
repeat	Tiles the background image in both horizontal and vertical directions. This is the default value.
repeat-x	Tiles the background image in the horizontal direction only.
repeat-y	Tiles the background image in the vertical direction only.
no-repeat	Does not tile the background image. The image is rendered only once.

Browser Preview

※ The background image used in the samples is shown below.

<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;">A 100px tall div with 10px padding. Border is '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;">A 100px tall div with 10px padding. Border is '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;">A 100px tall div with 10px padding. Border is '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;">A 100px tall div with 10px padding. Border is 'dashed 10px rgba(0, 0, 255, 0.5)'.</div>