CSS Tutorial

The CSS background properties are used to define background behavior OR effects for an HTML elements. The HTML element can have multiple background properties, and you can define value for them according to our requirements.

CSS Background Property List

You can see that the list of all important CSS background properties below:

background-color
background-image
background-repeat
background-position
background-attachment
background

CSS background-color

The background-color is used to define background color of an HTML element or a group of HTML elements.

Example of CSS background-color

<html>
<!DOCTYPE html>
<head>
    <title>This is a Web Page</title>
</head>
<body>
   <p style="background-color:#abc">Hello! This is Text Paragraph with background color.</p>
</body>
</html>

Output

Hello! This is Text Paragraph with background color.

CSS background-image

The CSS background-image property is used to set an image in background of HTML elements. Just pass the image path for accessing image in background;

By default, the image is repeated so it covers the entire element.

Example of CSS background-image

p{
 background-image: url('img/background_thin.jpg');
}

<!DOCTYPE html>
<html>
<head>
    <title>This is a Web Page</title>
</head>
<body>
   <p>Hello! This is Text Paragraph with background image property.</p>
</body>
</html>

CSS background-repeat

The CSS background-repeat property is used to repeat an image of both horizontally and vertically direction by default. Basically, the CSS background-repeat property is always used along with background-image.

Suppose, you are using an image in the background, which size of image is required for that element BUT image repetition property is able to full-fill the requirement of element.

Example of CSS background-repeat

The CSS background-repeat in repeat-x:

body{
  background-image: url('img/background_img.jpg');
  background-repeat: repeat-x;
}

The CSS background-repeat in repeat-y:

body{
  background-image: url('img/background.jpg');
  background-repeat: repeat-y;
}

The CSS background-repeat: no-repeat

The CSS background-repeat property showing the background image only once, if you don't want to repeat background image, then use the no-repeat property of an element:

Example of background-repeat: no-repeat

body{
  background-image: url('img/background.jpg');
  background-repeat: no-repeat;
}

CSS background-position

The CSS background-position property is used to define the position of the background image.

It is also used along to define the exact background-image location, means that which position you want to start image and where you want to ends.
To define background-position value use any length unit like px, em, cs, vw OR direction unit like top, left, right, bottom.
The value for background-position will be start from the top of in clock-wise direction.

Example of CSS background-position

body{
  background-image: url('img/background_1.jpg'); 
  background-repeat: no-repeat; 
  background-position: 200px 100px;
}

Suppose, if you want the background image in right and top then:

body{
  background-image: url('img/background-thin.jpg'); 
  background-repeat: no-repeat; 
  background-position: right top;
}

CSS background-attachment

The CSS background-attachment used to define whether the background image should scroll OR be fixed.

Example of CSS background-attachment

body{
  background-image: url('img/background_thin_1.jpg'); 
  background-repeat: repeat-x; 
  background-position: fixed;
}

Example of CSS background-attachment: scroll

body{
  background-image: url('img/background_thin_1.jpg'); 
  background-repeat: no-repeat; 
  background-position: right top;
  background-attachment: scroll;
}

CSS background

The CSS background is the shortest form to represent CSS background property, i.e. this is all in one can define all background property in this. It is the most preferable property of background.

Example of CSS background

body{
  background:#ffaacc url('img/background-2.jpg') no-repeat right top;
}

← Previous Next →