Common CSS Background Properties Showcase

This template demonstrates the most commonly used CSS background properties with examples. Each section covers a key property, its possible values, and a visual example.

Background Properties

`background-color`

Sets the background color of an element, e.g., red, #ff0000, rgba(0, 255, 0, 0.5).

Background-color: #007bff (blue)

`background-image`

Sets a background image, e.g., url('image.jpg'), linear-gradient(...).

Background-image: linear-gradient(to right, red, blue)

`background-repeat`

Controls how a background image repeats, e.g., repeat, no-repeat, repeat-x, repeat-y.

Background-repeat: no-repeat

`background-position`

Sets the position of a background image, e.g., center, top left, 50% 50%.

Background-position: center

`background-size`

Sets the size of a background image, e.g., auto, cover, contain, 100px 100px.

Background-size: cover

`background-attachment`

Controls whether a background image scrolls or is fixed, e.g., scroll, fixed, local.

Background-attachment: fixed (scroll to see effect)

`background-clip`

Defines how far the background extends, e.g., border-box, padding-box, content-box.

Background-clip: content-box

`background`

Shorthand for all background properties, e.g., #fff url('image.jpg') no-repeat center/cover.

Background: shorthand with color, image, position, and size