background-repeat - HTML CSS CSS Property

HTML CSS examples for CSS Property:background-repeat

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. background-repeat

Description

The background-repeat CSS property controls if the background-image is repeated or tiled after it has been sized and positioned.

The following table summarizes the background-repeat property.

Item Value
Default value: repeat
Applies to:All elements
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 

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

Property Values

The following table describes the values of this property.

Value Description
repeatDefault value. The background image will be repeated both vertically and horizontally.
repeat-x repeated horizontally only.
repeat-y repeated vertically only.
no-repeat not repeated.
initial Sets to its default value.
inherit takes the value of its parent element background-repeat property.

The example below shows the background-repeat property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS background-repeat property</title>
  <style type="text/css">
    body {<!--from w  ww  . j av  a  2s .  co m-->
      background-image: url("https://www.java2s.com/style/demo/Google-Chrome.png");
        background-repeat: repeat-x;
    }
    </style>
 </head>
 <body>
  <h1>Repeating background image</h1>
  
 </body>
</html>

Related Tutorials