CSS Background Image

Introduction to CSS

About Lesson

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

This div has a background image.

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

This div has a non-repeating background image.

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

This div has a background image that covers the entire element.

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

This div has a background image centered in the element.

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

This div has a fixed background image.

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.

Join the conversation