Stacks Image 2016313

PROJECT19

For RapidWeaver & Stacks

SVG Backgrounds

This project uses the new PaddyBG stack to allow SVG and gradient code to be used as backgrounds. SVG background are always super sharp and small - much smaller than an equivalent image, and are therefore quick to download and display keeping your web site lean.

There are many free SVG background generators that you can customise to create a unique BG and then simply copy that code into the PaddyBG stack. Then just drop whatever stack you want to add a BG to, inside the PaddyBG stack and just make sure the dropped stack is set to no or a transparent BG (most are by default).

Use this Project19 as a source of SVG Backgrounds to copy and paste into your own designs or to use as the basis of a business site that needs to be quick and unique, or you want to use SVG backgrounds to avoid having to find or buy stock images.

Hello, world!

This is a simple hero unit (clone), a simple jumbotron-style component for calling extra attention to featured content or information.

Stacks Image 2016172

SVG Generators

Visit https://www.svgbackgrounds.com for one of the best and most creative SVG Background generating sites. This site has a large number of free designs and also has a paid service which opens the door to a pandoras box of patters, shape and complex gradients. Some are complex with SVG shapes, gradients and patterns available to just copy and past into PaddyBG. Note that each design can have many parameters that can be set to your unique selection. Try it and see what you come up with. Note that you should credit them if you are using the free service.

Another great site is https://www.heropatterns.com for creative SVG patterns suitable for all backgrounds and not just aimed at Hero Sections. This site is mainly a pattern generator with BG and foreground colour but there are many unique patterns such as the contour one used in this project. Try it and see what you come up with. Note that you should credit them if you are using the free service.

Stacks Image 2016576

Card layout

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae

Stacks Image 2016563

Card layout

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae

Stacks Image 2016591

Card layout

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae

PaddyBG Setup

Firstly, generate your own SVG Gradients, Patterns or Gradients at an online generator service such as https://www.svgbackgrounds.com or https://www.heropatterns.com to generate your BG code. Then copy the generated code.

Stacks Image 2016466

Drop your stack that you want to use an SVG Background with, into PaddyBG. Then in the PaddyBG settings box shown above, just paste the code you just copied. Make sure the stack that you placed inside PaddyBG has no BG colour or if it has, then make it transparent. Note that you can also round the corners of PaddyBG to match any rounded content.

Advanced technique. You can also edit the size and positioning of the generated code for basic size and positioning by pasting in CSS such as background-position: center center; - to centre the BG image, or background-size: cover; to make the SVG fill the container. Read more here about background positioning

              

PROJECT 19


Checkout the wicked cool background used here at SVGBackgrounds.com & Heropatterns.com