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, Lynda.com, Pluralsight and Envato Network.

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

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

40 comments

  1. I like you, man. but out of curiosity how about importing all as a single SVG. what will be the cons of that.

  2. Why nobody show how to put this on shopify. I am depressed. How to put svg image on shopify

  3. 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?

  4. The padding-bottom on the svg background doesn't give me room under instead is expanding the background. No idea why.

  5. Does this work in react? I was getting corb error when trying to get an svg link from figma snd using it as a background

  6. Can you please create an extension to this video and teach us how to convert this template to be responsive?
    Thank you in advance!

  7. Very very disappointed, I really thought u will write the SVG code in html and not import it from some 3rd software

  8. 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.

  9. Like it. You could use live server which auto updates. Very easy to install and use.

  10. Thank you very much my friend, I am very grateful by your teaching. Receive a
    cordial greeting from a venezuelan living in Chile

  11. It will be really helpful if you can highlight on screen which key you're pressing along with clicks.

  12. 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.