background repeat

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

CSS background-repeat Property

Example

Repeat a background-image only vertically:

body {
    background-image: url("paper.gif");
    background-repeat: repeat-y;

}

Definition and Usage

The background-repeat property sets if/how a background image will be repeated.

By default, a background-image is repeated both vertically and horizontally.

 

CSS Syntax

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

Property Values

Value Description  
repeat The background image will be repeated both vertically and horizontally. This is default  
repeat-x The background image will be repeated only horizontally  
repeat-y The background image will be repeated only vertically  
no-repeat The background-image will not be repeated  
initial Sets this property to its default value. Read about initial  
inherit Inherits this property from its parent element. Read about inherit  

More Examples

Example

How to repeat a background image both vertically and horizontally (default for background images):

body {
    background-image: url("paper.gif");
}

Example

Repeat a background image only horizontally:

body {
    background-image: url("paper.gif");
    background-repeat: repeat-x;

}

Example

Display a background image only one time, with no-repeat:

body {
    background-image: url("paper.gif");
    background-repeat: no-repeat;

}