CSS Property background-repeat

You can specify a value for both the horizontal and vertical repeats. If you provide only one value, the browser will use that repeat style in both directions.

Summary

Initial value: repeat
Inherited: no
CSS Version: CSS1
JavaScript syntax: object.style.backgroundRepeat="repeat-x"
Animatable: no

CSS Syntax

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

Property Values

The background-repeat values are:

Value	Description
repeat-x	Repeats the image horizontally and the image may be fragmented.
repeat-y	Repeats the image vertically and the image may be fragmented.
repeat	Repeats the image in both directions and the image may be fragmented.
space	The image is repeated to fill the space without creating fragments.
round	The image is scaled to repeat without creating fragments.
no-repeat	The image is not repeated.

Browser compatibility


`background-repeat`	Yes	Yes	Yes	Yes	Yes

Example

<!DOCTYPE HTML> 
<html> 
    <head> 
        <style type="text/css"> 
        p { <!--   w  ww.j a v  a 2 s.  com-->
            background-image: url(http://java2s.com/style/download.png); 
            background-repeat: repeat-x; 
        } 
        </style> 
    </head> 
    <body> 
        <p> 
            HyperText Markup Language (HTML) is the main markup language for 
            displaying web pages and other information that can be displayed 
            in a web browser(From From Wikipedia, the free encyclopedia).
        </p> 
    </body> 
</html>

Click to view the demo

Example 2

The following code shows how to use no-repeat.

<!DOCTYPE html>
<html>
<head>
<style>
body {<!--   w  w  w. ja  v  a 2  s.com-->
    background-image: url('http://java2s.com/style/download.png');
    background-repeat: no-repeat;
}
</style>
</head>
<body>

        <p> 
            HyperText Markup Language (HTML) is the main markup language for 
            displaying web pages and other information that can be displayed 
            in a web browser(From From Wikipedia, the free encyclopedia).
        </p> 

</body>
</html>

Click to view the demo