The Full Background Shorthand
The CSS background shorthand packs all background properties into one declaration. Order matters: background: [color] [image] [position] / [size] [repeat] [attachment] [origin] [clip]. For SVG patterns, the most important properties are background-image, background-color, background-size, and background-repeat.
background-size: The Scale Control
Use background-size: auto (default) to render the pattern at its native SVG dimensions. Use pixel values like 200px 200px to force a specific tile size. background-size: cover scales one tile to fill the entire element — useful for non-repeating hero patterns. contain fits the tile without cropping.
.pattern-small { background-size: 40px 40px; }
.pattern-medium { background-size: 80px 80px; }
.pattern-large { background-size: 160px 160px; }
.pattern-fluid { background-size: 5vw 5vw; } /* scales with viewport */background-position: Alignment
Patterns almost always use background-position: 0 0 (default). For optical centering on hero sections, try center center. When combining multiple background layers, each layer gets its own position value separated by commas.
Layering Multiple Backgrounds
CSS supports multiple background layers, listed first-to-front. This lets you overlay a semi-transparent gradient over an SVG pattern for depth. Layers are defined by comma-separating all background properties. The last comma-value is always the base layer (closest to the element).
.layered {
background-image:
linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,.6)),
url('data:image/svg+xml;base64,...');
background-color: #1e1b4b;
background-repeat: no-repeat, repeat;
background-size: cover, auto;
}background-blend-mode
The background-blend-mode property blends background layers with each other (not with elements below). This is different from mix-blend-mode. Setting background-blend-mode: multiply on a pattern over a colour creates a tinted, integrated look. Values include: multiply, screen, overlay, soft-light, hard-light, difference, exclusion, hue, saturation, color, luminosity.
background-attachment: Fixed Patterns
background-attachment: fixed creates a parallax-like effect where the pattern stays fixed to the viewport as the user scrolls. It's visually striking but triggers full repaints on every scroll frame on non-composited layers — use sparingly on desktop-only experiences. Prefer scroll (default) for mobile-friendly patterns.
background-origin & background-clip
background-origin sets where background-position starts: border-box, padding-box (default), or content-box. background-clip controls where the background is painted: set to text with a transparent colour to clip an SVG pattern to the shape of text characters for a stunning typographic effect.