SVG Background patterns

The cool thing with SVG backgrounds is that you can easily change the colors, the opacity and the size.

Adding a SVG background is very easy, as it's done in CSS. Here are a couple of websites where you can find some really cool patterns for your background :

www.heropatterns.com

www.svgbackgrounds.com

You can customize the patterns directly from their websites. Don't forget to add a background-size.

background-size:auto; for the default size,
Or background-size:50px; (or whatever) for a different size;

For a little bit of fun, you can also animate the background.

#section-2-46 {
     background-size:30px;
     animation-duration: 1s;
     animation-name: svgAnim;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
}
 @keyframes svgAnim {
     from {
         background-position: 0 0;
    }
     to {
         background-position: 60px 60px;
    }
}