Creative SVG Backgrounds for Modern Web Design

— In this tutorial, I show you how to create creative SVG backgrounds and then how to integrate them via HTML and CSS. Enjoy this quicky!

– – – – – – – – – – – – – – – – – – – – – –

Subscribe for NEW VIDEOS weekly!

My site:
My personal FB account:
Coursetro FB:
Coursetro’s Twitter:

Join my Discord!
^-Chat with me and others

– – – – – – – – – – – – – – – – – – – – – –

Who is Gary Simon? Well, I’m a full stack developer with 2+ decades experience and I teach people how to design and code. I’ve created around 100+ courses for big brands like LinkedIn,, Pluralsight and Envato Network.

Now, I focus all of my time and energy on this channel and my website

Come to my discord server or add me on social media and say Hi!


  1. The small circles have exported way too big, they end up being the size of the web browser. Unsure on how to fix it. When scaling it down, it is in no way relative and easy. Understand what im doing wrong?

  2. I know the video is pretty old but how would you scale the svg files for mobile devices? the 'background-size: cover' property will cause them to stay in the same position for every resolution.

  3. Hey Gary, thanks for your videos, i have been following you a lot. I have a question regarding an SVG background, im trying to make a full SVG background layout for my website, i made all the design on adobe XD and i don't know if i should export the whole background as an SVG and just set it as the website background and then write on top of it or if its better to export pieces of background and make the whole composition. The big problem there i have is when i'm trying to make it responsive, when background changes the size, the content gets messed up. what would you recommend me to do?

Leave a comment

Your email address will not be published.