Responsive vector backgrounds

Scalable Vector Graphics (SVG) are a great way to implement simple yet great-looking backgrounds for our responsive web pages.

Screenshot from the live demo

By manually specifying the vectors’ coordinates we can generate fitting geometrical shapes over which we have full control. And the best is, the SVG code can be embedded right within our stylesheet so now additional HTTP requests are issued.

The markup for the background can be extremely concise:

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'>
<path d='M1 1 L9 1 L9 9 L1 9' fill='yellow' />
</svg>

Like this yellow rectangle. It can be inserted into CSS using a data URL:

.cool-shape {
background-image: url("data:image/svg+xml;utf8, <svg>...</svg>");
}

The UTF-8 encoding means the code will be human-readable and editable.

With a few additional rules the background will scale to fit any container:

.bg {
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%, auto;
}

To use just add the classes to your HTML element:

<div class="bg cool-shape">Element with SVG background</div>

Try the live demo to see this technique in action. Take a look at the full source code here.


Check out the companion project for this article at https://github.com/coderdiego/svg-bg-demo

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.