How to Add Background Image in CSS?

The CSS background-image property is used to add an image as a background to an element.

Syntax

background-image: url()

1. Setting background Image of an Element

A background image is added to an h1 tag using the URL.

Output

2. Setting Background Size

The size of the background image can be set using the background-size property.

Syntax

background-size: value;

Output

3. Positioning the Background Image

The background-position property allows you to position the background image within the element.

Syntax

background-position: value

Output

4. Repeating Background Images

The repetition of the background-image can be set using the background-repeat property.

Syntax

background-repeat: repeat

Output