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

div.test { background-repeat: repeat;}
div.test1 { background-repeat: repeat-x;}
div.test2 { background-repeat: repeat-y;}
div.test3 { background-repeat: no-repeat;}

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>