title: background-image: not working properly
body: <p>I know people been asked similar questions but I couldn't find the right answer for my issue. So I am asking public to help with my issue. I have a img folder and i have a search.png image in it. Its a search icon that I am trying to use it for my youtube search API page. So the problem that I am having is when I put the search.png to my background: url(../img/search.png) its not showing up at all, instead its empty square box. I will attach my code below. Please dont dislike my issue question I really need an answer.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
   padding:0;
   margin:0;
  }
  
  body{
   font-family:"Segoue",sans-serif;
   line-height:2em;
   color:#000000;
   background:#e1e1e1 url(../img/red.jpg) fixed;
   background-repeat: no-repeat;
   /*background-position: cover;*/
   background-size: cover;
   font-size:13px;
  }
  
  a{
   color:#333;
   text-decoration:none;
  }
  
  #container{
   /*height: 100px;*/
   width:740px;
   background:#f4f4f4;
   opacity: 0.9;
   margin:auto;
   margin-top: 300px;
   /*border: 2px solid black;*/
  }
  
  .clearfix{
   clear:both;
  }
  
  header{
   padding:30px 20px;
   background:#f4f4f4;
  }
  
  header h1{
   color:#001373;
   margin-bottom:5px;
  }
  
  header span{
   color:#000000;
   border: 1px solid black;
   border-radius: 5%;
   background-color: #007EFF;
   padding: 8px;
  }
  
  section{
   padding:30px 20px 20px 20px;
  }
  
  footer{
   padding:20px;
   background:#f4f4f4;
   text-align:center;
  }
  
  #search{
   display: block;
   margin-bottom: 15px;
  }
  
  .fieldcontainer{
   display: block;
   position: relative;
   width: 90%;
   margin: 0 auto;
  }
  
  #search-btn{
   position: absolute;
   right: 360px;
   top: 5px;
   height: 32px;
   width: 32px;
   border: 0;
   cursor: pointer;
   zoom: 1;
   filter: alpha(opacity=65);
   opacity: 0.65;
   background-image: transparent url(../img/search.png) top-left no-repeat;
  }
  
  #search-btn:hover{
   filter: alpha(opacity=90);
   opacity: 0.9;
  }
  
  .search-field{
   box-sizing: border-box;
   display: block;
   width: 45%;
   padding: 7px 17px;
   padding-right: 43px;
   background-color: #BBB3F7;
   color: #75026C;
   font-weight: bolder; 
   border-radius: 1px solid black;
   font-size: 1.6em;
   border-color: #00B5ED;
   border-radius: 1px;
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
   cursor: default;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;script src="js/script.js"&gt;&lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;div id="container"&gt;
     &lt;header&gt;
      &lt;h1&gt;Search&lt;span&gt;Vidz&lt;/span&gt;&lt;/h1&gt;
      &lt;p&gt;Search all Youtube videos&lt;/p&gt;
     &lt;/header&gt;
     &lt;section&gt;
      &lt;form id="search-form" name="search-form" onsubmit="return search()"&gt;
       &lt;div class="fieldcontainer"&gt;
        &lt;input type="search" id="query" class="search-field" placeholder="Search YouTube..."&gt;
        &lt;input type="submit" name="search-btn" id="search-btn" value=""&gt;
       &lt;/div&gt;
      &lt;/form&gt;
      
      &lt;ul id="results"&gt;&lt;/ul&gt;
      &lt;div id="buttons"&gt;&lt;/div&gt;
     &lt;/section&gt;
     &lt;footer&gt;
      &lt;p&gt;Copyright &amp;copy; 2014, All Rights Reserved&lt;/p&gt;
     &lt;/footer&gt;
    &lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>