How load an SVG file from a remote url as a background image in CSS?
Tags: css
Published: 2022-12-12 05:30:34

---
  title: How load an SVG file from a remote url as a background image in CSS?
  published: true
  tags: CSS
  date: Mon Dec 12 2022 11:00:34 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/load-svg-file-from-remote-url-as-background-image-css
  cover_image: https://res.cloudinary.com/df8e3k5he/image/upload/blog/main_e19119aef7.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/load-svg-file-from-remote-url-as-background-image-css)
  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
<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
<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
<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](https://codesandbox.io/s/load-svg-file-from-remote-url-as-background-image-html-o5o95u?file=/index.html).

That's all 😃.