CSS Multiple Backgrounds

CSS Multiple Background

We can add various background to an element -

1. Background color

Background-color property is used to add background color -

Example -

Output -

2. Background Image

The background-image property is used to specify a background image to be applied to all matched elements.

By default, this image is tiled to cover the entire element, excluding margin.

Syntax -

Background-image: url(...);

Now we will see Example -

Example -

Output -

Now if you want the complete image in the background use the following line of code -

background-size: cover;

Example -

Output -

Background-Repeat

If the image is small then we can set the background-Repeat property to either repeat or no-repeat.

Syntax -

Background-repeat: value;

Note-

By default it is set to repeat.

Example -

Output -

Example 2 - Using no-repeat

Output –