DEV Community

Cover image for How load an SVG file from a remote url as a background image in CSS?
MELVIN GEORGE
MELVIN GEORGE

Posted on • Originally published at melvingeorge.me

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)