[Solved] How to set svg as the background for a div in html

Question

I want to make svg as the background for some divs in my game instead of images so that they can be loaded even if the user is offline but I'm unable to do it is it possible

https://code.sololearn.com/Wbafs3WevZMA/?ref=app

Answer 1

Try this

body
{

background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M22.22 9.74L16.31 14.51L18.58 21.82L12.26 17.46L6.05 21.75L7.96 14.73L2.02 9.98L9.68 9.78L12.10 2.47L14.57 9.53L22.22 9.74z"></path> </svg>');
}

Answer 2

Not sure can you use svg writen inside your code, but file .svg can be used, here is how to make your svg file and how to set background
https://css-tricks.com/using-svg/

Answer 3

yes you can achieve it by using css property
background-image : "...."

Answer 4

Beauty Thanks it worked 😋

Answer 5

Gordon I didn't understand what do you mean by "...." I don't want to import a svg file outside with link I want to make the svg written code in html to become the background for the div by css or js if it is possible