CSS Tutorial - CSS Backgrounds

The properties to style the background are described in the following list.

background-color
Sets the background color for an element.
The color is drawn behind any images.
background-image
Sets the background images for an element.
If more than one image is specified, each subsequent image is drawn behind those that precede it.
background-repeat
Sets the repeat style for images.
background-size
Sets the size of a background image.
background-position
Positions the background image.
background-attachment
Sets the attachment style for images that are in an element that has a viewport.
background-clip
Specifies the clipping style for images.
background-origin
Positions the background image.
background
Shorthand element.

Background Color

We can use background-color to set a background color.

The following code sets the Background Color.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!-- www .j  a v a2  s . c om-->
  background-color: lightgray;
}
</style>
</head>
<body>
  <p>This is a test.<br/ >
  This is a test.<br/ >
  This is a test.<br/ >
  This is a test.<br/ >
  This is a test.<br/ >
  This is a test.<br/ >
  This is a test.<br/ >
  This is a test.<br/ >
  </p>
</body>
</html>

Click to view the demo

Background Image

We can use background-image to set a background image.

The following code sets the Background Image.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!--  w w w .ja v  a2s  .  c  o  m-->
  background-image: url(http://www.java2s.com/style/download.png);
  background-size: 20px 20px;
  background-repeat: repeat-x;
}
</style>
</head>
<body>
  <p>This is a test. <br/>
  This is a test. <br/>
  This is a test. <br/>
  This is a test. <br/>
  This is a test. <br/>
  This is a test. <br/>
  
  This is a test. <br/>
  This is a test. <br/>
  
  </p>
</body>
</html>

Click to view the demo

The default value for the z-index property is zero.

Background repeat

We can use background-repeat property to control how the image will cover the whole area of background.

The allowed values for background-repeat are described in the following list.

repeat-x - Repeats the image horizontally; the image may be fragmented.
repeat-y - Repeats the image vertically; the image may be fragmented.
repeat - Repeats the image in both directions; the image may be fragmented.
space - The image is repeated to fill the space without creating fragments, and the remaining area is allocated evenly around the images.
round - The image is scaled so that it can be repeated without creating fragments.
no-repeat - The image is not repeated.

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

But for repeat-x and repeat-y, the browser will use the no-repeat style for the second value.

The following code shows how to use background-repeat to make background image repeat along x axis.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!--   w  w w. j  a  v a2 s  . c  o m-->
  background-image: url(http://www.java2s.com/style/download.png);
  background-size: 20px 20px;
  background-repeat: repeat-x;
}
</style>
</head>
<body>
  <p>This is a test. <br/>
  This is a test. <br/>
  This is a test. <br/>
  This is a test. <br/>
  This is a test. <br/>
  This is a test. <br/>
  
  This is a test. <br/>
  This is a test. <br/>
  
  </p>
</body>
</html>

Click to view the demo

The image is repeated horizontally across the element.

Related Properties

Property	Description	CSS
background-attachment	Fix or scroll background image with the rest of the page	1
background-clip	Set the painting area of the background	3
background-color	Set the background color	1
background-image	Set the background image	1
background-origin	Set the positioning area of the background images	3
background-position	Set the starting position of a background image	1
background-repeat	how to repeat a background image	1
background-size	Set the size of the background images	3
background	background properties in one declaration	1