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:
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.
Once you’ve made your choice you can choose to alter the Foreground and/or Background color and play with the opacity.
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:
That’s it!
You’ll have an SVG pattern background that makes your site distinctive.
[[Cocoa alloc] init]; 