JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>test SVG bg</title>
</head>
<body>
  <div id="foo">

  </div>
</body>

CSS

#foo{
    height: 400px;
    width: 400px;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE0LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgNDMzNjMpICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBzdHlsZT0iZmlsbDojMjMxRjIwOyIgZD0iTTI2LDR2Mi4wNDdjMCwyLjIxMS0xLjc4OSw0LTQsNHMtNC0xLjc4OS00LTRWNGgtNHYyLjA0N2MwLDIuMjExLTEuNzg5LDQtNCw0cy00LTEuNzg5LTQtNFY0SDB2MjgNCgkJaDMyVjRIMjZ6IE0xMCwyOEg2di00aDRWMjh6IE0xMCwyMEg2di00aDRWMjB6IE0xOCwyOGgtNHYtNGg0VjI4eiBNMTgsMjAuMDA4aC00di00aDRWMjAuMDA4eiBNMjIsMjh2LTRoNEwyMiwyOHogTTI2LDIwaC00di00aDQNCgkJVjIweiIvPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiMyMzFGMjA7IiBkPSJNOCw2VjJjMC0xLjEwNCwwLjg5NS0yLDItMnMyLDAuODk2LDIsMnY0YzAsMS4xMDQtMC44OTUsMi0yLDJTOCw3LjEwNCw4LDZ6Ii8+DQoJPHBhdGggc3R5bGU9ImZpbGw6IzIzMUYyMDsiIGQ9Ik0yMCw2VjJjMC0xLjEwNCwwLjg5NS0yLDItMnMyLDAuODk2LDIsMnY0YzAsMS4xMDQtMC44OTUsMi0yLDJTMjAsNy4xMDQsMjAsNnoiLz4NCjwvZz4NCjwvc3ZnPg0K');
    background-repeat: no-repeat;
    background-size: 200px;
    fill: #F00;
}

#foo:after{
    content: "How can I change the fill color ? ";
    position: absolute;
    top: 230px;
}