CSS Background Image

The background-image property in CSS is used to set an image as the background of an element. You can use a variety of image formats such as JPEG, PNG, GIF, etc.

Setting a Background Image

Here is an example of how to set a background image using the background-image property:

Example

div {
    background-image: url('path/to/your/image.jpg');
}

Background Image Options

You can use additional properties to control the background image’s behavior:

Background Repeat

The background-repeat property determines whether the background image repeats (tiles) or not.

div {
    background-image: url('path/to/your/image.jpg');
    background-repeat: no-repeat;
}

Background Size

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

div {
    background-image: url('path/to/your/image.jpg');
    background-size: cover;
}

Background Position

The background-position property sets the starting position of the background image.

div {
    background-image: url('path/to/your/image.jpg');
    background-position: center center;
}

Background Attachment

The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.

div {
    background-image: url('path/to/your/image.jpg');
    background-attachment: fixed;
}

Conclusion

The background-image property in CSS allows you to enhance your web designs by adding images as backgrounds. By combining it with other background properties, you can control how the background image behaves and appears in your elements.