Tutorials Tonight
Follow Us

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

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.