title: CSS background Image plus gradient in 4 corners
body: <p>What I want to achieve is something like this</p>
  
  <p><img src="https://i.stack.imgur.com/tc3b6.jpg" alt="enter image description here"></p>
  
  <p>What I tried so far is the CSS3 multiple background, it worked when I used one corner </p>
  
  <p>See it here: <a href="http://www.colorzilla.com/gradient-editor/#000000+0,000000+30&amp;0.65+0,0+30;Custom" rel="nofollow noreferrer">CSS code</a></p>
  
  <p>But it didn't work when I added more 'backgrounds'</p>
  
  <p>See example here: <a href="http://jsfiddle.net/KhLsQ/3/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <pre><code>code is too long to post it here, view it on jsfiddle
  </code></pre>
  
  <p>Is there any suggestion to improve this, or is there a better way to doit? 
  Thank you</p>
  
  <p>Update: Answer</p>
  
  <p>Here is the background (gradient) I used. <a href="http://www.colorzilla.com/gradient-editor/#000000+58,000000+100&amp;0+55,0.8+100;Custom" rel="nofollow noreferrer">Link</a></p>
  
  <p>And here is how I used the code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;section class="window"&gt;
     &lt;div class="win1con"&gt;
  
     &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>    .window {
        width: 100%;
        height: 100%;
        position: absolute;
        overflow: hidden;
      }
      .win1con {
        width: 100%;
        height: 100%;
        position: absolute;
        overflow: hidden;
        top: 0%;
        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iNTglIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjgiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 55%, rgba(0,0,0,0.05) 58%, rgba(0,0,0,0.8) 100%); /* FF3.6+ */
        background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(55%,rgba(0,0,0,0)), color-stop(58%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0.8))); /* Chrome,Safari4+ */
        background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 55%,rgba(0,0,0,0.05) 58%,rgba(0,0,0,0.8) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 55%,rgba(0,0,0,0.05) 58%,rgba(0,0,0,0.8) 100%); /* Opera 12+ */
        background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 55%,rgba(0,0,0,0.05) 58%,rgba(0,0,0,0.8) 100%); /* IE10+ */
        background: radial-gradient(ellipse at center,  rgba(0,0,0,0) 55%,rgba(0,0,0,0.05) 58%,rgba(0,0,0,0.8) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
        top: 0%;
        background: url('../images/vntg.jpg');
      }
  </code></pre>