Repeat background image in CSS

Repeat background image [background-repeat]

In the example above, did you notice that by default the butterfly was repeated both horizontally and vertically to cover the entire screen? The property background-repeat controls this behaviour.

The table below outlines the four different values for background-repeat.

Value	Description	Example
background-repeat: repeat-x	The image is repeated horizontally	Show example
background-repeat: repeat-y	The image is repeated vertically	Show example
background-repeat: repeat	The image is repeated both horizontally and vertically	Show example
background-repeat: no-repeat	The image is not repeated	Show example

For example, to avoid repetition of a background image the code should look like this:

 
 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }