title: This css is not working on the footer element
body: <p>I am trying to apply a gradient to an image which is being set as a background image of a footer element.I have confirmed that the motif.png exists in the same folder as the html file is.  I have a sample html page as follows . <a href="http://jsfiddle.net/17kzcbay/" rel="nofollow">JsFiddle here</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;this is a dummy title&lt;/title&gt;
      &lt;style&gt;
        #footer {
            color:#777;
            display:block;
            vertical-align:bottom;
            background:  #3c8dbc !important;
            background-image: url(motif.png) repeat, -webkit-gradient(linear, left bottom, left top, color-stop(0, #3c8dbc), color-stop(1, #67a8ce)) !important;
            background-image: url(motif.png) repeat, -ms-linear-gradient(bottom, #3c8dbc, #67a8ce) !important;
            background-image: url(motif.png) repeat, -moz-linear-gradient(center bottom, #3c8dbc 0%, #67a8ce 100%) !important;
            background-image: url(motif.png) repeat, -o-linear-gradient(#67a8ce, #3c8dbc) !important;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#67a8ce', endColorstr='#3c8dbc', GradientType=0) !important;
            color: #fff;
            border-top:#252525 5px solid;
            z-index:101;
          }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;p&gt;You are welcome&lt;/p&gt;
    &lt;/body&gt;
    &lt;footer id="footer"&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;p&gt;Dummy Para&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;hr&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;p&gt;Copyright Paragraph&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/footer&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I am now wondering why the image along with the background gradient is not being applied to it. Only the color is applied. Some help is needed, please. </p>
  
  <p><strong>Update</strong>
  As per Tyler's recommendations, I have done this </p>
  
  <pre><code>  background: url(motif.png) repeat #3c8dbc !important;
    background:  -webkit-gradient(linear, left bottom, left top, color-stop(0, #3c8dbc), color-stop(1, #67a8ce)) !important;
    background:  -ms-linear-gradient(bottom, #3c8dbc, #67a8ce) !important;
    background:  -moz-linear-gradient(center bottom, #3c8dbc 0%, #67a8ce 100%) !important;
    background:  -o-linear-gradient(#67a8ce, #3c8dbc) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#67a8ce', endColorstr='#3c8dbc', GradientType=0) !important;
  </code></pre>
  
  <p>the gradient is applied , but the image is not applied. </p>