JSFiddle - React, Tailwind, and code Playground

HTML

<div class="example">
        <div id="breadcrumbs">
            <a href="http://www.css3.info/">Home</a> / <a href="http://www.css3.info/preview/">CSS 3 Preview</a> / <a href="http://www.css3.info/preview/multiple-backgrounds/">Multiple backgrounds</a> / Example
        </div>

        <h1>Multiple background test</h1>Where i need 4 divs in my layout to get it working, i only need one here. Currently only supported by Safari, but I hope multiple backgrounds will soon be supported by all major browsers...<br> 
        (and please enjoy the old old old images from v1.0 of what used to be joostdevalk.nl and is now <a href="http://yoast.com/">yoast.com</a>)
        <br>
        Go back to the <a href="http://www.css3.info/preview/multiple-backgrounds/">multiple backgrounds preview explanation</a>.
    </div>

CSS

div.example {
  background: 
        url("http://www.css3.info/wp-content/uploads/2007/09/") no-repeat scroll left top, /* <-- Remove this and it works */
        url("http://www.css3.info/wp-content/uploads/2007/09/banner_fresco.jpg") no-repeat scroll 11px 11px, 
        url("http://www.css3.info/wp-content/uploads/2007/09/body-bottom.gif") no-repeat scroll left bottom, 
        url("http://www.css3.info/wp-content/uploads/2007/09/body-middle.gif") repeat-y scroll left center transparent;
  height: 200px;
  padding: 150px 20px 20px;
  width: 720px;
}