October 25, 2018 · SVG · Web

How to Create a Customized Vector Background for Your Website Within 1 Minute

Searching high and low to get a vector background for your website? Want to get a vector wallpaper quick but don’t want to be paying for stock vector graphics?

You can now create a vector background like below for yourself in less than 1 minute!

Snowflakes background in SVG
Snowflakes background in SVG
  1. Open Vecta.io, and create a drawing.
  2. Draw a rectangle, and fill it with the background color you want.
  3. Drop your preferred shape into the drawing, then run the plugin - Scatterer to randomly distribute the shapes around your drawing!
Scatterer plugin
Scatterer plugin
  1. Export your SVG directly, and use it for your website background image right away!
.element {
  background-image: url(/images/snowflakes.svg);
}

Or you can also export as PNG or JPEG and use it directly as your PowerPoint templates, for a much more professional looking presentation.

Now, you have a perfect vector image for your website background which appears crisp and sharp on any screen resolutions - from 320px to 4K screens. Lightweight, save bandwidth and most important of all, less work done!

Comment below and let us know where else do you use vector graphics? We'd love to listen from you!

Like the article? Give the author some claps.

Share it with your friends!
AUTHOR

Yi Qian

CXO at Vecta.io. Solving problems with people for people by connecting dots between brains, over a cup of coffee.

Creating a diagram?

Introducing the world's first SVG editor with javascript based plugins

Learn more...

IF YOU LIKE THIS POST, YOU'LL LIKE THESE TOO

January 14, 2019 · SVG · Web

Best practices for SVG SEO in Google Image

With the proliferation of high resolution devices, SVG is definitely the future to serving high res screens with responsive images, at a small file size and low bandwidth. In fact, some sites that we check-in daily like Google, YouTube, Twitter ar...

December 12, 2018 · SVG · Web · CSS

The definitive guide to CSS styling order

Ever wondered why your CSS does not apply and require the important keyword instead? Or why SVG editors uses inline attributes instead of CSS style sheets? Read on to find out how styling methods affect what's being applied to your elements.

December 01, 2018 · SVG · Web · PNG

Responsive images using SVG instead of srcset

It used to be, if you embed an image onto your website, that will be the end of the story. But with the proliferation of high resolutions displays, webmasters all over the world are scrambling to update their websites with high-res images using srcse...