CSS background-image Property

The background-image property in CSS is used to set an image as the background of an element. It allows you to specify one or multiple background images for an element.

🔹 Syntax

selector {
    background-image: url("image.jpg");
}

🔹 Example Usage

✅ Setting a Single Background Image

body {
    background-image: url("background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

• no-repeat: Prevents the image from repeating.

• cover: Makes the image cover the entire screen.

🔹 Multiple Background Images

You can apply multiple background images by separating them with a comma.

div {
    background-image: url("image1.png"), url("image2.jpg");
    background-position: left top, right bottom;
    background-repeat: no-repeat, no-repeat;
}

• image1.png appears in the top-left.

• image2.jpg appears in the bottom-right.

🔹 Background Image with Linear Gradient

div {
    background-image: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)), url("image.jpg");
    background-size: cover;
}

• The gradient blends with the image.

🔹 Other Background Properties

Property	Description
background-repeat	repeat, no-repeat, repeat-x, repeat-y
background-size	auto, cover, contain, 100px 100px
background-position	top, center, left bottom, 50% 50%
background-attachment	scroll, fixed, local

🔹 Short-hand Property

Instead of writing multiple properties, you can use shorthand:

div {
    background: url("image.jpg") no-repeat center/cover fixed;
}

Order: background: image repeat position/size attachment;

🎯 Summary

• The background-image property sets an image as a background.

• You can use gradients, multiple images, and control positioning.

• The shorthand background property simplifies writing styles.