When most developers think of CSS backgrounds, they reach for background-color or slap a background-image on a hero section and call it done. But the CSS background module is quietly one of the richest areas of the entire language – a suite of nine carefully designed properties that, when combined, can produce visual effects that would otherwise require image editors, extra DOM elements, or heavy JavaScript.
A single HTML element can carry multiple layered background images, each with its own size, position, repeat behaviour, and blend mode – all stacked on top of a base colour, all declared in just a few lines of CSS. That checkerboard pattern you once built with a PNG? Pure CSS. That duotone photo effect? A couple of gradients and a blend mode. That gradient text? One property you might not even know exists.
background-color
background-color: <color> | transparent | inherit
The most fundamental background property, background-color defines the base layer of an element’s background by applying a solid colour. This colour fills the entire background painting area – covering the content and padding – but does not extend into the border or margin.
It acts as a reliable fallback and foundation, always rendering beneath any background images. This means that if an image fails to load, contains transparency, or does not fully cover the element, the background colour will still be visible.
The property accepts a wide range of colour formats, including named colours, HEX, RGB, RGBA, HSL, and HSLA, giving you flexibility in how you define and manage colour across your design. Because of its simplicity and broad browser support, it’s commonly used not only for styling but also for ensuring accessibility and maintaining visual consistency throughout a layout.
background-color: tomato;
background-color: #c1440e;
background-color: rgb(193 68 14 / 0.8);
background-color: hsl(22deg 86% 41%);
background-color: oklch(55% 0.2 35);
background-color: transparent;
100%
background-image
background-image: none | <image> [, <image>]*
The background-image property allows you to place one or more images behind an element, forming the visual layers of its background. These can be traditional image files (such as PNG, JPG, or SVG) or generated images like CSS gradients.
One of its most powerful features is support for multiple backgrounds. You can define several images in a comma-separated list, and they will be stacked in layers – with the first image listed appearing on top, and each subsequent image layered beneath it. This makes it possible to create complex visual effects without additional markup.
At the base of this stack sits the background-color, which always renders underneath all background images. If any images include transparency, fail to load, or don’t fully cover the element, the background colour will show through.
Each background layer can be controlled independently using related properties like positioning, sizing, and repetition, allowing for precise and flexible design control.
The <image> type includes url(), linear-gradient(), radial-gradient(), conic-gradient(), and image-set().
background-image: url(‘texture.png’);
/* Gradient */
background-image: linear-gradient(135deg, #c1440e, #f4c97a);
/* Multiple layers (first = on top) */
background-image:
url(‘dots.png’),
radial-gradient(circle at 50% 50%, #fff, #eee);
url() images – they’re all part of the same property.
background-repeat
background-repeat: repeat | no-repeat | repeat-x | repeat-y | space | round
The background-repeat property controls how a background image is tiled within an element’s background positioning area. By default, images repeat in both the horizontal and vertical directions (repeat), ensuring the entire container is filled, regardless of the image’s original size.
You can fine-tune this behaviour with several keyword values. For example, no-repeat displays the image only once, while repeat-x and repeat-y limit repetition to a single axis. More advanced options like space and round adjust how images are distributed – either adding space between tiles or scaling them slightly so they fit perfectly without clipping.
This property becomes especially useful when working with patterns, textures, or small decorative graphics. Combined with other background properties, it gives you precise control over how images behave and scale across different element sizes and layouts.
background-repeat: no-repeat; /* show image once only */
background-repeat: repeat-x; /* tile horizontally */
background-repeat: repeat-y; /* tile vertically */
background-repeat: space; /* tile with spacing, no crop */
background-repeat: round; /* scale tiles to fit whole */
/* Two-value syntax (x y) */
background-repeat: repeat space;
background-position
background-position: <position>
The background-position property determines the starting position of a background image within its background positioning area. In other words, it defines where the image is anchored before any repetition or sizing is applied.
It’s a highly flexible property, accepting keyword values like top, center, bottom, left, and right, as well as precise percentage and length values (such as %, px, em, etc.). You can also combine horizontal and vertical values-for example, center top or 20px 50%-to fine-tune placement along both axes.
Percentages are calculated relative to the element’s dimensions, making them especially useful for responsive designs, while length values provide pixel-perfect control. This property is particularly important when working with non-repeating images (no-repeat) or when you want to focus on a specific part of an image, such as centering a hero background or aligning a pattern exactly where you need it.
A unique quirk of percentage values: 50% 50% centers the image’s own center point over the element’s center, not its top-left corner. This makes centering intuitive.
background-position: top right;
background-position: 50% 50%;
background-position: 20px 40px;
/* 4-value offset syntax (CSS4) */
background-position: right 20px bottom 30px;
center
background-size
background-size: auto | cover | contain | <length> | <percentage>
The background-size property specifies the size of one or more background images, giving you control over how they scale within an element. By default, images are displayed at their original (intrinsic) size, but this property allows you to override that behaviour.
You can define exact dimensions using lengths (px, em, etc.) or percentages, or provide one value (width) and let the height scale proportionally. This makes it easy to maintain aspect ratios or stretch images to fit specific layouts.
Two special keyword values are particularly important for responsive design:
coverscales the image to completely cover the entire background area, potentially cropping parts of the image to maintain its aspect ratio.containscales the image so the entire image fits within the element, ensuring nothing is cropped, though it may leave empty space.
When using multiple background images, you can assign different sizes to each layer by separating values with commas. Combined with properties like positioning and repetition, background-size plays a key role in creating flexible, visually consistent designs across different screen sizes.
background-size: cover; /* fill, may crop */
background-size: contain; /* fit inside, may letterbox */
background-size: 200px 100px; /* exact dimensions */
background-size: 50% auto; /* half width, auto height */
cover
background-size: cover; background-position: center; is the go-to combination. It ensures your image always fills the container and stays centered regardless of viewport size.
background-attachment
background-attachment: scroll | fixed | local
The background-attachment property determines how a background image behaves when the page is scrolled. It controls whether the image moves along with the content or remains fixed relative to the viewport.
By default, the value is scroll, which means the background image scrolls normally with the element. Setting it to fixed anchors the image to the viewport instead, so it stays in place while the content moves over it – a technique commonly used to create the classic parallax-style effect. Another option, local, ties the background to the element’s content, causing it to scroll along with the element’s internal scroll area rather than the page itself.
This property is especially effective for creating depth and visual interest in layouts, but it should be used thoughtfully, as fixed backgrounds can have performance implications on some devices, particularly on mobile.
background-attachment: fixed; /* parallax effect */
background-attachment: local; /* scrolls with content */
| Value | Relative to | Moves when |
|---|---|---|
| scroll | Element | Page scrolls |
| fixed | Viewport | Never (parallax!) |
| local | Element content | Element’s own content scrolls |
background-attachment: fixed disables GPU compositing for that element in many browsers, potentially causing repaint on every scroll. Use CSS custom properties or JavaScript-based parallax for smooth 60fps effects.
background-origin
background-origin: border-box | padding-box | content-box
The background-origin property defines where the background positioning area begins – essentially setting the reference box that background-position uses to calculate its coordinates.
It determines which part of the element the background is positioned relative to, with three possible values:
padding-box(default): positions the background relative to the padding areaborder-box: extends positioning to include the bordercontent-box: restricts positioning to just the content area
This becomes particularly important when working with borders or padding, as it directly affects how background images are aligned within the element. While it doesn’t control how far the background is painted (that’s handled by a related property), it plays a key role in ensuring precise placement-especially in more complex layouts or when layering multiple backgrounds.
This is separate from where the background is painted (that’s background-clip). You can position relative to the content box while still painting the full padding area.
background-origin: border-box; /* starts at border edge */
background-origin: content-box; /* starts at content edge */
padding-box
background-clip
background-clip: border-box | padding-box | content-box | text
The background-clip property specifies where a background is painted – in other words, how far it visually extends within an element.
By default, the value is border-box, which means the background is drawn all the way to the outer edge of the border, appearing underneath it. You can restrict this behaviour using other values: padding-box clips the background to the padding area, preventing it from appearing beneath the border, while content-box confines it strictly to the content area, stopping at the inner edge of the padding.
This property is especially useful when working with borders that have transparency or when you want tighter visual control over how backgrounds interact with spacing inside an element. It pairs closely with related background properties to fine-tune exactly where and how your background is displayed.
The text value is the creative powerhouse here: it clips the background to the foreground text, enabling gradient or image fills on typography when combined with -webkit-text-fill-color: transparent.
background-clip: padding-box; /* stops at border */
background-clip: content-box; /* stops at padding */
/* Gradient text technique */
background: linear-gradient(135deg, #1a56db, #3b82f6);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
background-blend-mode
background-blend-mode: <blend-mode>
The background-blend-mode property defines how a background layer blends with the layers beneath it – including other background images and the background-color. It introduces Photoshop-style blending effects directly into CSS, allowing for more dynamic and visually rich designs without needing image editing software.
You can apply a variety of blend modes such as multiply, screen, overlay, darken, and lighten, each producing different interactions between colours and tones. These modes control how pixel values are combined, enabling effects like darkening images, enhancing contrast, or creating subtle overlays.
When working with multiple background layers, you can specify a blend mode for each one by providing a comma-separated list of values. This makes it possible to stack gradients, textures, and images together and control exactly how they interact.
While powerful, background-blend-mode should be used thoughtfully, as results can vary depending on the colours and images involved. It’s particularly effective for creative effects like tinted images, soft overlays, and complex layered backgrounds-all achieved purely with CSS.
There are 16 blend modes. The most widely used are multiply, screen, overlay, color-burn, and luminosity.
background-blend-mode: multiply;
background-blend-mode: screen;
background-blend-mode: overlay;
/* CSS-only – two gradients + a base colour */
background-image:
linear-gradient(135deg, rgba(255,0,128,0.9), rgba(0,100,255,0.9)),
radial-gradient(circle at 30% 60%, gold, crimson, navy);
background-blend-mode: overlay;
normal
background shorthand
background: [layer,]* final-layer
Rather than writing out each sub-property individually, you can declare everything in one line using the background shorthand. It accepts all of the properties covered in this guide – except background-blend-mode, which must always be set separately.
The order of values within each layer follows a specific pattern. The one rule worth memorising: background-position and background-size must always appear together, separated by a forward slash – position / size. Everything else can be written in any order, though sticking to the conventional order above keeps your code readable.
background: url(‘hero.jpg’) center / cover no-repeat;
/* With a fallback colour */
background: url(‘hero.jpg’) center / cover no-repeat #0d1b2a;
/* Gradient + colour in one */
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.6)) no-repeat bottom / 100% 50%, #1a56db;
/* Multiple layers – comma separated */
background:
url(‘stars.png’) center / 200px repeat,
url(‘moon.png’) 80% 20% / 80px no-repeat,
linear-gradient(to bottom, #0d1b2a, #1a56db);
background shorthand resets every sub-property – including ones you haven’t explicitly listed – back to their defaults. If you set background-blend-mode earlier in your stylesheet and then declare a background shorthand below it, the blend mode won’t be reset (since it’s not part of the shorthand), but background-origin, background-clip, and others will be. Declare your shorthand first, then override individual properties beneath it if needed.
For most real-world usage, you won’t need to specify every value – shorthand shines when you need one or two properties fast. Use the longhand properties when you’re fine-tuning layers or need to make intent explicit for other developers reading the code.
background: url(‘image.jpg’) center / cover no-repeat;
/* The longhand equivalent – same result, more explicit */
background-image: url(‘image.jpg’);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
Multiple Backgrounds
background-image: <image>, <image>, …
Every background sub-property (except background-color) accepts a comma-separated list of values corresponding to multiple background layers. The first value in each list corresponds to the topmost layer.
This is incredibly powerful – you can create complex visual effects without a single extra element in your HTML.
background-image:
url(‘noise.png’), /* layer 1 (top) */
linear-gradient(135deg, #667eea, #764ba2); /* layer 2 */
background-size: 200px 200px, cover;
background-blend-mode: overlay, normal;
Mesh Gradient (4 radial layers)
Quick Reference
All 8 longhand properties at a glance
Below is a complete reference of all CSS background sub-properties, their default values, and browser support. Click on each property to explore detailed explanations, examples, and usage tips on our dedicated CSS properties pages.
| Property | Default | Support |
|---|---|---|
| background-color | transparent | CSS1 ✓ |
| background-image | none | CSS1 ✓ |
| background-repeat | repeat | CSS1 ✓ |
| background-position | 0% 0% | CSS1 ✓ |
| background-size | auto auto | CSS3 ✓ |
| background-attachment | scroll | CSS1 ✓ |
| background-origin | padding-box | CSS3 ✓ |
| background-clip | border-box | CSS3 ✓ |
| background-blend-mode | normal | CSS3 ✓ |
