Webzstore
The CSS background' property is a shorthand for setting all background properties simultaneously. These properties include background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, and background-attachment. The CSS background property simplifies styling an element's background by combining multiple aspects into a single line of code.
CSS 'background' Property Example
See the Pen CSS 'background' Property by Webzstore (@webzstore) on CodePen.
The 'background' shorthand property offers a powerful and flexible way to style the background of elements. It supports a wide range of visual effects with concise syntax, making it essential for designers and developers who want to create engaging and visually rich web interfaces.
Browser Support For 'background' Property
| Browser | Version | Released |
|---|---|---|
| Chrome | 1 | Dec 2008 |
| Edge | 12 | Jul 2015 |
| Firefox | 1 | Nov 2004 |
| Safari | 1 | Jun 2003 |
| Opera | 3.5 | Nov 1998 |
Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for background for the full compatibility details, including mobile browsers.
CSS Syntax of the 'background' Property
background: color | image | position/size | repeat | origin | clip attachment | initial | inherit;
Usage of the 'background' Property
Use the 'background' property when you want to define multiple background characteristics with minimal code. It's perfect for adding images, colors, and gradients and controlling their behavior and positioning. This property is widely used to enhance the visual appeal of web pages, making it a fundamental tool for web design.
Property Values of the 'background' Property
- Color: Specifies the background color of the element. Can be any valid CSS color value.
- Image: Sets one or more background images. Use url() to specify an image path or none to specify no image.
- Position: This determines the initial position of the background image. It can be defined by keywords (like top left, center) or values (like 50% 50% 10px 20px).
- Size: Specifies the size of the background image. It can be specified in lengths, percentages, or keywords (contain, cover).
- Repeat: Defines how the background image is repeated. Values include repeat, repeat-x, repeat-y, and no-repeat.
- Origin: Determines the positioning area of the background image. Values are padding-box, border-box, content-box.
- Clip: Defines the painting area of the background. Values are border-box, padding-box, content-box.
- Attachment: Specifies whether the background image is fixed about the viewport (fixed) or scrolls with the content (scroll).
- Initial: Sets all the background properties to their initial values.
- Inherit: Inherits the background properties from the parent element.
