Using a Vector Pattern Background on a Web page

Having a website pop with a cool background can be a great thing. But using an image may be distracting even with a blur. I’ll walk you through the steps I take to use an SVG pattern background in order to allow the webpage to have more depth without sacrificing readability.


I’ll use this Quote Generator as a working example:

Screenshot from 2020-07-12 15-24-04

First, head on over to HeroPattern which is a collection of repeatable SVG background patterns that you can use on your web projects.

Once there select a pattern that you like – there are many to choose from.

Screenshot from 2020-07-12 15-29-41

Once you’ve made your choice you can choose to alter the Foreground and/or Background color and play with the opacity.

Screenshot from 2020-07-12 15-30-47

You’ll want to bring down the opacity to 0.4 or so in order for the pattern to be there but not be overwhelming.

Once you’re satisfied with the look you can grab the CSS rules to apply by copying them directly from the Generated CSS Code.

Take the generated CSS code and insert into your CSS file’s body selector:

Screenshot from 2020-07-12 15-36-06

That’s it!

You’ll have an SVG pattern background that makes your site distinctive.

Screenshot from 2020-07-12 15-24-24

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s