CSS Backgrounds

CSS backgrounds define the background colors and images of HTML elements . They allow you to use different colors, gradients, or images behind the content. In this chapter, we will learn about various CSS background properties, including how to set background colors, apply images, adjust their size and position, control repetition, and more.

CSS Backgrounds Example

The following section shows an example of setting color, image, and gradient for an HTML element.

CSS Background Shorthand Property

The background shorthand property allows you to specify all background properties in a single declaration.

The correct order of properties when using the shorthand background property is as follows:

• background-color

• background-image

• background-position

• background-size (must be used with /)

• background-repeat

• background-origin

• background-attachment

• background-clip

Syntax

The syntax for the background property is as follows:

background: bg-color bg-image bg-position bg-size bg-repeat bg-origin bg-clip bg-attachment | initial | inherit;



/* Example */

background: green url('image.jpg') top/20% no-repeat border-box content-box fixed;

Note: If background-size is to be added, it must be included immediately after the background-position , separated with ’/‘. For example: “left/50%“.

Setting Background Color

You can set the background color for elements like div, span, body, paragraph, etc using the background-color property.

Example

In this example, we have used three different types of color values for body and div tags. For a complete reference of color in CSS, check out the CSS colors chapter.

Setting Images in Background

To set an image as background for another element such as div, span, body, paragraph, etc., you can use the background-image property. It can be used to set one or more than one image as the background. To set multiple images as background, we separate the images using commas.

Example

In this example, we have set a background image for the body element.

Define Background Position

The background-position property sets the initial position of the element’s background image. The position of the image is relative to the value set by the background-origin property.

Example

In this example, we have set the position of the background image to the right of the div element using the background-position property.

Setting Background Size

To set the size of the background image of an element, you can use the background-size property. The background image can either be stretched, constrained, or left to its normal size.

Example

In this example, we have set the size of the background image to 100% of the div element using the background-size property.

Repeating Background Image

You can control the repetition of the background images using the background-repeat property. The image can be repeated along the horizontal and vertical axes, or not repeated.

Example

In this example, we have used the background-repeat property to repeat the background image horizontally and vertically.

Defining Background Origin

CSS background-origin property is used to set the origin of the background, which could be from the start of the border, inside the border, or inside the padding.

Example

In this example, we have used the background-origin property to set the origin of the background image to the content box of the div element.

Controlling Background Scrolling

You can use the background-attachment property to determine whether the position of the background image is fixed within the viewport or scrolls within its container.

Example

In this example, we have used the background-attachment property to set the background image to be fixed within the viewport.

Controlling Background Display

You can use CSS background-clip property to specify how the background image or color should be displayed within an element’s padding box, border box, or content box. It determines the area of an element to which the background will be applied.

Example

In this example, we have used the background-clip property to apply the background to the content and padding area of the div element.

CSS Background Properties

All the properties related to background are listed in the table below: