How load an SVG file from a remote url as a background image in CSS?

Originally posted here!
To load an SVG file from a remote url as a background image in CSS, you can use the background-image CSS property and use the url() function and pass the remote url to the SVG file as an argument to the function.

TL;DR

<html>
  <style>
    .mySvg {
      background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Black_Paw.svg/852px-Black_Paw.svg.png");
      width: 100%;
      height: 100%;
    }
  </style>
  <body>
    <div class="mySvg"></div>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, beatae
      veniam commodi nam expedita maxime hic enim! Tenetur, hic quis, atque amet
      vero sapiente debitis consequatur, consequuntur voluptatibus est illo
      minus veniam quidem rem necessitatibus. Amet, soluta? Delectus,
      repudiandae dolorem. Aliquam fuga maxime at facilis quisquam non, amet
      saepe earum ea optio deserunt, minus debitis unde adipisci neque magnam
      illum repellat voluptatibus quasi inventore. Hic.
    </div>
  </body>
</html>

For example, let's say we have a webpage with some text like this,

<html>
  <body>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, beatae
      veniam commodi nam expedita maxime hic enim! Tenetur, hic quis, atque amet
      vero sapiente debitis consequatur, consequuntur voluptatibus est illo
      minus veniam quidem rem necessitatibus. Amet, soluta? Delectus,
      repudiandae dolorem. Aliquam fuga maxime at facilis quisquam non, amet
      saepe earum ea optio deserunt, minus debitis unde adipisci neque magnam
      illum repellat voluptatibus quasi inventore. Hic.
    </div>
  </body>
</html>

Now let's use another div with the class name of mySvg to place the SVG file as a background image.

To do that, we can use the background-image CSS property, and then use the url() function and then pass the remote url path of the SVG file as an argument.

The url for SVG is https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Black_Paw.svg/852px-Black_Paw.svg.png.

It can be done like this,

<html>
  <style>
    .mySvg {
      background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Black_Paw.svg/852px-Black_Paw.svg.png");
      width: 100%;
      height: 100%;
    }
  </style>
  <body>
    <div class="mySvg"></div>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, beatae
      veniam commodi nam expedita maxime hic enim! Tenetur, hic quis, atque amet
      vero sapiente debitis consequatur, consequuntur voluptatibus est illo
      minus veniam quidem rem necessitatibus. Amet, soluta? Delectus,
      repudiandae dolorem. Aliquam fuga maxime at facilis quisquam non, amet
      saepe earum ea optio deserunt, minus debitis unde adipisci neque magnam
      illum repellat voluptatibus quasi inventore. Hic.
    </div>
  </body>
</html>

Now the SVG image will be loaded into the webpage as the background image. Yay 🥳!

See the above code live in codesandbox.

That's all 😃.

Blog

How load an SVG file from a remote url as a background image in CSS?

MELVIN GEORGE

TL;DR

Join Our Newsletter. No Spam, Only the good stuff.

Related