Easily Understand CSS background Properties with 4 Demos

What is background property?

The CSS background properties are used to apply the background styling to HTML elements. For example, in the <h1> heading, you may want to use a specific color or image as a background. While in paragraphs or Div you may want different background color or an image etc.

>>A background-color property example

CSS gives options to control how to use the background color or images or other background properties. For example, whether to repeat the image or not by using the background property.

You may also specify whether background image should be scrolled with the page or not in the background CSS property. The background property also allows mixing the background color with the image.

A basic example of background property

Basic syntax of background property

Following is the basic syntax to use the background property with the single declaration:

background: 000000 url(‘image.jpg’) right;

For example:

h1

{

background: #000000;

}

The example sets <h1>’s background color as black in the document by using background property of CSS. You may also set the background properties like image, color, position separately.

A few examples are shown below with links to individual background property’s chapters.

Example of using background properties

In the following example, we will use the background property in headings i.e. h1 and h2.

The <h1> is simply given the background color as black. While the <h2> is styled with multiple background properties including background-color, background-image, position etc. by using individual background properties.

CSS background tutorial

Experience this example online

An example of background-color property

See the following example to set the background color of a few HTML elements.

CSS background color

Experience this example online

A background-image property example

The following example sets the background image of the body of the web page.

CSS background image

Experience this example online

A background-position example

In the following example, the background-position property is used to set the image position in the background. See the example by clicking the link below:

Experience this example online

CSS background properties

Following are the individual properties related to the background.

  • background-color (sets the background color of the element)
  • background-image (This sets the background image of an element)
  • background-position (This property sets the starting position of the background image. For example, image starts where the text ends in <h1> or <h2> etc.
  • background-size (This property sets the size of the image (CSS3))
  • background-attachment (This property controls the scrolling of image in the background)
  • background-repeat (This property is used to set whether to repeat an image in the background of an element or not.)
  • background (This property is used to set one or more above mentioned properties in the single declaration)

Few of these background properties are explained in their respective chapters along with examples.