Background in CSS


Using CSS background property we can set the background color, image, position, repeat, attachment, size of the background, etc.

Let's see the syntax of the background property.

/* setting background color */
background: color;

/* setting background image */
background: url(image.jpg);

/* setting background color and image */
background: color url(image.jpg);

/* setting background color, image, position, repeat, attachment, size */
background: color url(image.jpg) position repeat attachment size;

Let's see the example of the background property.

CSS background example

CSS background Properties

The CSS background properties are used to define different aspects of the background of an element. The background properties are:

  1. background-color
  2. background-image
  3. background-position
  4. background-repeat
  5. background-attachment
  6. background-size
  7. background (shorthand)

Let's look at each of these properties in detail.


1. background-color

The background-color property is used to set the background color of an element. The background color can be set to any color value, including hex, RGB, RGBA, HSL, HSLA, and color keywords.

The following example sets different background colors for elements.

Example

.element1 {
    background-color: red;
}
.element2 {
    background-color: #a5e680;
}
.element3 {
    background-color: rgb(0, 255, 0);
}
.element4 {
    background-color: rgba(255, 0, 0, 0.5);
}
.element5 {
    background-color: hsl(60, 100%, 50%);
}
.element6 {
    background-color: hsla(120, 100%, 50%, 0.5);
}
Try it

2. background-image

The background-image property sets the background image of an element.

To set a background image, you must specify the URL of the image using the url() function. The URL must be enclosed in quotes.

Example

.element1 {
    background-image: url('flower.jpg');
}

.element2 {
    background-image: url('cat.jpg');
}
Try it

The background image can be repeated horizontally and vertically, or not repeated at all. The background image can also be positioned anywhere on the background layer. Learn about background image in CSS in detail.


3. background-position

The background image that we set using the background-image property can be positioned anywhere on the background layer. The default position of the background image is top left.

However, the background image can be positioned anywhere on the background layer using the background-position property. The background-position property can be set to any of the following values:

CSS background-position example

Example

.element1 {
    background-image: url('flower.jpg');
    background-position: left top;
}

.element2 {
    background-image: url('flower.jpg');
    background-position: right bottom;
}

.element3 {
    background-image: url('flower.jpg');
    background-position: center center;
}
Try it

4. background-repeat

When an image is set as a background image and the image is smaller than the element, the image is repeated to fill the entire element.

The background-repeat property specifies whether the background image should be repeated or not.

The background-repeat property can be set to any of the following values:

CSS background-repeat example

Example

.element1 {
    background-image: url('flower.jpg');
    background-repeat: repeat;
}

.element2 {
    background-image: url('flower.jpg');
    background-repeat: repeat-x;
}

.element3 {
    background-image: url('flower.jpg');
    background-repeat: repeat-y;
}

.element4 {
    background-image: url('flower.jpg');
    background-repeat: no-repeat;
}
Try it

5. background-attachment

The background-attachment property specifies whether the background image should be fixed or scroll with the rest of the page.

If you set a background image for an element, the background image will scroll with the rest of the page by default.

The background-attachment property can be set to any of the following values:

CSS background-attachment example

Select a value and scroll the page.

Example

.element1 {
    background-image: url('flower.jpg');
    background-attachment: scroll;
}

.element2 {
    background-image: url('flower.jpg');
    background-attachment: fixed;
}
Try it

6. background-size

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

The background-size property can be set to any of the following values:

CSS background-size example

Example

.element1 {
    background-image: url('flower.jpg');
    background-size: 100px 100px;
}

.element2 {
    background-image: url('flower.jpg');
    background-size: 50% 50%;
}

.element3 {
    background-image: url('flower.jpg');
    background-size: cover;
}

.element4 {
    background-image: url('flower.jpg');
    background-size: contain;
}
Try it

7. background (shorthand)

All of the above properties we have looked at can be set using single shorthand property called background.

Background properties like color, image, repeat, attachment, position and size can be set all at once using the background property.

Syntax:

background: color image position/size repeat origin clip attachment;

Please note all the properties are optional but the order of the properties should be maintained.

The following example shows some of the valid combinations of the values for this property.

background: #fff;
background: #fff url(image.jpg) no-repeat;
background: #fff url(image.jpg) center/cover;
background: #fff url(image.jpg) center/cover no-repeat fixed;
background: #fff url(image.jpg) left top/50% repeat-x scroll;

Here is a working example for this:

Example

.element1 {
    background: #fff;
}

.element2 {
    background: #fff url('seashells.jpg') no-repeat;
}

.element3 {
    background: #fff url('seashells.jpg') center/cover;
}

.element4 {
    background: #fff url('seashells.jpg') center/cover no-repeat fixed;
}

.element5 {
    background: #fff url('seashells.jpg') left top/50% repeat-x scroll;
}
Try it

Quiz - CSS Background Quiz

What is the default value of the background-repeat property?
Which of the following is not a valid value for the background-size property?
Which of the following background properties is used to control the position of a background image?
How can you set a background color for a specific element in CSS?
Which of the following values can be used to specify the background-attachment property?
Which of the following is not a valid value for the background-origin property?
How can you set a background image for a specific element in CSS?
What is the default value of the background-clip property?
If you want to repeat a background image horizontally, which value should you use for the background-repeat property?
Which of the following is not a valid value for the background-repeat property?
Which of the following is not a valid value for the background-attachment property?
Which of the following is not a valid value for the background-position property?
How can you set a background gradient for a specific element in CSS?
What is the default value of the background-size property?
What is the default value of the background-attachment property?
If you want to set a background image to cover the entire element, which value should you use for the background-size property?

Conclusion

That's it for this tutorial. We have learned about the background property and its sub-properties. We have also learned about the background-image property and how to use it to add background images to elements with various options.