CSS background Property

The background property is a shorthand for setting all background-related properties in a single line of code.

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

<color>	Defines a solid color for the background layer.
<image>	Sets one or more images or gradients to be displayed.
<position>	Defines the initial horizontal and vertical starting point for the image.
<size>	Specifies the dimensions of the background image using lengths, percentages, or keywords like cover and contain.
<repeat>	Determines if the image repeats horizontally, vertically, both, or not at all.
<attachment>	Sets whether the background image scrolls with the content or remains fixed in the viewport.
<origin>	Specifies where the background image's positioning area begins.
<clip>	Determines whether the background extends into the border, padding, or just the content box.

Code Examples

A basic example using the shorthand to set a background color, image, repeat behavior, position, and size.

div {
  width: 100%;
  height: 400px;
  background: #222222 url("https://www.adamkhoury.com/images/logo.png") no-repeat center / contain;
}

Advanced usage showing stacked layers with a gradient overlay and a JavaScript click event that changes the background to a solid color.

<div id="hero" style="width: 100%; height: 500px; background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('hero.jpg') no-repeat center / cover;"></div>

<script>
const hero = document.getElementById("hero");
hero.onclick = function() {
    this.style.background = "#ff0000";
};
</script>

Pro Tip

You can stack multiple gradients to create complex patterns or UI glassmorphism effects without needing any external image files. This reduces HTTP requests and keeps your site fast. Try using a semi-transparent linear-gradient on top of a background-image to create an instant color-tinted overlay directly in your CSS.

Deep Dive

Think of the background property as a layer cake. Each image or gradient you define is a layer stacked on top of the next, with the very first image listed appearing on top. The background-color is always the bottom-most layer, the base of the cake. If you leave out any sub-properties in the shorthand, they will automatically reset to their default values, which can overwrite previous individual settings. To include the background-size, it must be placed immediately after the background-position and separated by a forward slash, like "top left / cover". Commas are used to separate multiple image layers, but the solid color can only be defined on the very last layer.

Best Practices

Use the shorthand background property to keep your CSS clean and readable. However, always provide a solid background-color as a fallback in case your background-image fails to load or the user has images disabled. If you are only updating one specific aspect of the background via JavaScript or a hover state, use the specific sub-property like background-image instead of the shorthand to avoid resetting other styles like position or repeat.

Common Pitfalls

The most common mistake is forgetting the forward slash between position and size, which makes the entire declaration invalid. Another issue is that the shorthand property resets all background sub-properties to their initial values; if you previously set background-size and then use the background shorthand without it, your size setting will be wiped out. Also, remember that you cannot set a background-color in any layer except the final one when stacking multiple images.

Accessibility

Ensure that the contrast ratio between your background and foreground text meets WCAG standards for readability. If you use a background-image, make sure the background-color fallback provides enough contrast in case the image doesn't load. Never use a background image as the only way to convey important information, because screen readers do not acknowledge background images as content.

Dev Data Table: background property

default	none 0% 0% / auto repeat scroll padding-box border-box transparent
animatable	yes
inherited	no
experimental	no
year_intro	1996
year_standard	1998
js_syntax_1	element.style.background = "#ff0000";
js_syntax_2	element.style.setProperty("background", "#ff0000");
js_note	When manipulating shorthand background strings in JavaScript, ensure you follow the correct order and use the forward slash for size to prevent the browser from ignoring the declaration.
browsers	{ "Chrome": 1, "Edge": 12, "Firefox": 1, "Safari": 1, "Opera": 3.5, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 10 }