background

CSS Background Properties

CSS Background Properties

Background Color

The background-color property sets the background color of an element.

Example of Background Color: #3498db

Background Image

The background-image property sets an image as the background of an element.

Example of Background Image

Background Repeat

The background-repeat property controls whether a background image repeats. It can be set to repeat, no-repeat, repeat-x, or repeat-y.

Example of Repeated Background Image

Background Position

The background-position property specifies the starting position of a background image. Common values include center, top, bottom, left, and right.

Example of Centered Background Image

Background Size

The background-size property sets the size of the background image. Values include cover, contain, or specific dimensions like 100px 100px.

Example of Contained Background Image

Background Attachment

The background-attachment property sets whether a background image scrolls with the page (scroll) or stays fixed (fixed).

Example of Fixed Background Image

Combining Background Properties

You can combine multiple background properties in one shorthand property. For example:

background: url('image.jpg') no-repeat center/cover fixed;

This shorthand combines background-image, background-repeat, background-position, background-size, and background-attachment.