The CSS background properties are used to add background effects for elements.

CSS background-color

The background-color property specifies the background color of an element. You can apply this property in any HTML tag

See the Pen bg color by Arpit (@soniarpit) on CodePen.

CSS background-image

The background-image property used to put an image to use as the background of an element.

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

See the Pen bg image by Arpit (@soniarpit) on CodePen.

CSS Background Repeat

By default, the background-image property repeats an image both horizontally and vertically.

Some images should be repeated only horizontally or vertically, or they will look strange, like above example.

If the image above is repeated only horizontally (background-repeat: repeat-x;), the background will look better

See the Pen bg image 1 by Arpit (@soniarpit) on CodePen.

To repeat an image vertically, set background-repeat: repeat-y;

CSS background-repeat: no-repeat

Showing the background image only once is also specified by the background-repeat property

See the Pen bg img 2 by Arpit (@soniarpit) on CodePen.

CSS background-position

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

try this code in above example,

body{
  background-image:url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg");
  background-repeat: no-repeat;
  background-position: right top; /* this, also try left, bottom, */
}

CSS background-attachment

See the Pen bg img 2 by Arpit (@soniarpit) on CodePen.

To specify that the background image should scroll with the rest of the page then try background-attachment: scroll;

CSS background-size Property

Specify the size of a background-image with “auto” and in pixels

The background-size property specifies the size of the background images.

There are four different syntaxes you can use with this property: the keyword syntax (“auto”, “cover” and “contain”), the one-value syntax (sets the width of the image (height becomes “auto”), the two-value syntax (first value: width of the image, second value: height), and the multiple background syntax (separated with comma).

See the Pen bg img 3 by Arpit (@soniarpit) on CodePen.

try different values too. background-size: auto|length|cover|contain|initial|inherit;

Value	Description
auto	Default value. The background image is displayed in its original size
length	Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to “auto”.
percentage	Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to “auto”
cover	Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
contain	Resize the background image to make sure the image is fully visible
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

CSS background - Shorthand property

To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.

Instead of writing:

body {
  background-color: #313131;
  background-image: url("img.png");
  background-repeat: no-repeat;
  background-position: right top;
}

You can use the shorthand property background:

body {
  background: #313131 url("img.png") no-repeat right top;
}

When using the shorthand property the order of the property values is:

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

It does not matter if one of the property values is missing, as long as the other ones are in this order. Note that we do not use the background-attachment property in the examples above, as it does not have a value.

Previous: CSS Selectors

Next: CSS Colors