How to add SVG backgrounds to HTML

By Matt Visiwig Matt Visiwig Portrait Oct 20, 2021

There are two ways to add SVG backgrounds to HTML: CSS and inline SVG. Both require basic HTML and CSS knowledge.

Adding a background image via CSS is much easier, because the image is treated like a background and therefore you can place text and other content above the image. If you instead use inline SVGs for your background, you will need absolute or fixed positioning to add content above this background layer.

In this how to article we are going to dissect the latter and more difficult method. If you want to learn the CSS method, I already covered how to add SVG backgrounds via CSS on my blog.

Why add inline SVG as a background image in HTML

The main benefit to inlining SVG backgrounds is you can dynamically change and animate background properties. Your ability to change properties is limited with the CSS method: background-image.

The other reason would be if you plan to use duplicate elements to keep file size down. If you create a complex shape, you can give it an ID and then reference it with <use> element to place the complex shape elsewhere with a smaller footprint.

If you have no plans to manipulate the inline SVG as a background or reuse background elements, that would be a reason NOT to inline SVG as a background and instead reach for the CSS method: background-image.

How to add inline SVG as a background image in HTML

The first thing we need is SVG code. If you have a SVG file, you can open it in a code editor or simple text editor to get the SVG code in your clipboard. For this example, I’m going to SVGBackgrounds.com to grab this free background called “Liquid Cheese”, click the export button, then choose the “Inline SVG” option to copy the SVG code to my clipboard. I will paste it into my editor and cut out half of the paths (shapes) to simplify the demonstration. Here is the code I’m starting with.

<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 1600 800'>
   <rect fill='#ffaa00' width='1600' height='800'/>
   <path fill='#ffbe00' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/>
   <path fill='#ffcc00' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/>
   <path fill='#ffe529' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/>
   <path fill='#fff852' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/>
</svg>

First let’s add it to the page and in a way you can place text over it.

We’ll wrap both the text and background layers in a parent with position: relative which will allow the text layer to be position: absolute to display above the background. While the background has no special CSS properties, this is determining the container dimensions, but the parent wrap is controlling the current width.

<style>
   .wrap-layer{
      position: relative;
   }
   .text-layer{
      position: absolute;
      width: 100%;
      height: auto;
      top: 0;
      left: 0;
      /* non-critical styles left out */
   }
</style>

<div class="wrap-layer">
   <div class="text-layer">
      <p>HOVER OVER BACKGROUND</p>
   </div>
   <div class="background-layer">
      <svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 1600 800'><rect id="E1" fill='#ffaa00' width='1600' height='800'/><path id="E2" fill='#ffbe00'  d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/><path id="E3" fill='#ffcc00'  d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/><path id="E4" fill='#ffe529' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/><path id="E5" fill='#fff852'  d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/></svg>
   </div>
</div>

What it looks like:

Text over the background

Bonus step: let’s animate the inline SVG background

Now that the SVG is displaying as a background, lets take it to the next level and animate the SVG background.

For simplicity, I’m going to handle all animation logic through CSS. To that end, I will trigger animations using :hover and alter only CSS properties. You can alternatively reach for JS libraries like GSAP and Waypoints to handle complex animations, such as scrolling triggers, morphing shapes, etc. But that’s not the point of this article.

Let’s animate a color change on hover.

The first thing we will do is give each element an ID, so we can reference them individually. We’ll name them E1, E2, and so on.

To animate SVG via CSS, first we need to set initial and end states. The inline SVG already has inline colors set, so we will change the color on hover with a rule like this for each element:

.background-layer:hover #E5{
   fill: #808;
}

This will work, but to create a smooth transition between the colors, we need to set a transition property to instruct how fast to make the color animation. In the example below, it should animate over a full second. This rule targets all elements within the SVG.

.background-layer svg * {
   transition: fill 1s ease;
}

The result is below, hover over the yellow background to see the effect.

HOVER OVER BACKGROUND

Without going more in-depth on animating SVG, other CSS properties that are easy to animate are opacity and transform: scale(), transform: translate(), and transform: rotation().

I’ll leave the code for the example above for the curious:

<style>
   .wrap-layer{
      position: relative;
   }
   .text-layer{
      position: absolute;
      width: 100%;
      height: auto;
      top: 0;
      left: 0;
      padding: 30px;
      text-align: center;
      font-size: 32px;
      line-height: 1.2;
      pointer-events: none;
   }
   .background-layer svg * {
      transition: fill 1s ease;
   }
   .background-layer:hover #E1{fill: #404;}
   .background-layer:hover #E2{fill: #505;}
   .background-layer:hover #E3{fill: #606;}
   .background-layer:hover #E4{fill: #707;}
   .background-layer:hover #E5{fill: #808;}
</style>

<div class="wrap-layer">
   <div class="text-layer">
      <p>HOVER OVER BACKGROUND</p>
   </div>
   <div class="background-layer">
      <svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 1600 800'>
         <rect id="E1" fill='#ffaa00' width='1600' height='800'/>
         <path id="E2" fill='#ffbe00'  d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/>
         <path id="E3" fill='#ffcc00' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/>
         <path id="E4" fill='#ffe529' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/>
         <path id="E5" fill='#fff852' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/>
      </svg>
   </div>
</div>