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 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.

.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);
}

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.

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

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

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:

• top
• bottom
• left
• right
• center
• x% y%
• xpos ypos

.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;
}

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:

• repeat - The background image is repeated both horizontally and vertically. This is default
• repeat-x - The background image is repeated only horizontally
• repeat-y - The background image is repeated only vertically
• no-repeat - The background image is not repeated

.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;
}

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:

• scroll - The background image scrolls with the rest of the page. This is default
• fixed - The background image is fixed

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

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

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:

• length - Specifies the width and height of the background image
• percentage - Specifies the width and height of the background image in percentage
• cover - Resize the background image to make sure the image is fully covered within the element
• contain - Resize the background image to make sure the image is fully contained within the element

.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;
}

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:

.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;
}

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.