CSS background Property

CSS background Property

The background property in CSS is a shorthand for setting multiple background-related properties in one declaration. It allows you to define background color, image, position, size, repeat, origin, clip, and attachment all at once.

1. Syntax

selector {
  background: [color] [image] [position] / [size] [repeat] [attachment] [clip] [origin];
}

✅ The order of values matters, but some can be omitted.

2. Components of the background Property

Property	Description
background-color	Defines the background color.
background-image	Sets an image as the background.
background-position	Defines the position of the image.
background-size	Specifies the image size (cover, contain, etc.).
background-repeat	Controls image repetition (repeat, no-repeat).
background-attachment	Defines if the background scrolls or stays fixed.
background-clip	Defines how far the background extends.
background-origin	Defines where the background starts (border-box, padding-box, content-box).

3. Example – Full Background Shorthand

.box {
  width: 500px;
  height: 300px;
  background: linear-gradient(to right, red, blue) url("image.jpg") no-repeat center/cover fixed border-box;
}

✅ This applies:

• A gradient and image

• No-repeat behavior

• Centered position

• Cover size

• Fixed attachment

• Border-box clip

4. Example – Basic Background Usage

.box {
  background: lightblue;
}

✅ Only sets background color.

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

✅ Sets background image, position, and size.

5. Best Practices

✔ Use background: color image position / size repeat attachment clip origin; for full control.
✔ Use background-size: cover; for full-width backgrounds.
✔ Combine background-attachment: fixed; for parallax effects.