SVG background patterns

FAQ

How do I use one of these values?

Paste it as the background of any element, for example body { background: …; } or a hero section. The value bundles a background color, the pattern tile as a data URI, and repeat, so a single declaration is enough. The tile repeats seamlessly in both directions.

How do I change the colors?

Each value contains exactly two colors: the background hex at the front, and the pattern hex inside the data URI (it appears URL-encoded, %23 stands for the # sign). Replace both with your palette. For a subtler texture, lower the fill-opacity or stroke-opacity value inside the URI instead of changing the color.

Does a data URI background cost a network request?

No. The SVG travels inside the CSS itself, so there is no extra request, no file to host, and no flash of missing background. The tiles here are tiny (a few hundred bytes), well below the point where a data URI becomes a size concern.

Can I scale the pattern?

Yes. Add background-size to the same element, for example background-size: 48px 48px doubles a 24px tile. Keep the ratio of the original tile (width and height are in the value you copied) so the tiling stays seamless.