4

I have an SVG path (as below) that I want to use as a background in a div, does anyone know how to do this, I've searched the web but cant find any simple examples?

<svg xmlns="http://www.w3.org/2000/svg" width="4442" height="720" viewBox="0 0 4442 720">
  <path d="M36,297.64c317.62,0,428,134.58,696,136.74S1160,364,1436,389s431.72-102.09,618-91.36,505.93,73.37,715,72.29,339,72,674,64.45,712.27,157.83,920,174l46,111.14H36Z" transform="translate(0 0)" style="fill-opacity:0.029999999329447746"></path>
</svg>
Peter O.
  • 32,158
  • 14
  • 82
  • 96
user1419810
  • 836
  • 1
  • 16
  • 29

2 Answers2

16

Simply use it as background-image then adjust the needed values:

div.back {
  width:600px;
  height:120px;
  background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="500" height="100" viewBox="0 0 4442 720"><path d="M36,297.64c317.62,0,428,134.58,696,136.74S1160,364,1436,389s431.72-102.09,618-91.36,505.93,73.37,715,72.29,339,72,674,64.45,712.27,157.83,920,174l46,111.14H36Z" ></path></svg>');
  background-size:cover;
  background-color:pink;
}
<div class="back"></div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
0

you can't define an inline svg as background. You have 2 solutions here :

1 - store the svg as a separate file, and set it to background-image: url('path/to/your/svg/file.svg');

2 - If you really need to have it inline in your HTML for any reason, create another div, ste it to position absolute to make it fit ur main div. Then playing with z-index will lead you to the result you want

kevinniel
  • 1,088
  • 1
  • 6
  • 14
  • Good answer, though it does not really get clear how to style the second `div` container to show the scalar content. – arkascha Mar 11 '18 at 08:55
  • As a note: You can also – with some [restrictions](https://stackoverflow.com/q/34225933/1456376) in IE11 – use a (optionally base64 encoded) SVG in CSS directly as a background image. – insertusernamehere Mar 11 '18 at 08:58