title: Icon not displaying properly inside option element
body: <p>Inside the spacing-container div, I'm setting an image to appear to the right-hand side of the options, the image is a line spacer icon. However, when I set this icon it's just a big black mark. I've tried resizing it but not got very far with it. The icons which I'm using in the two other divs are working, which display a drop-down icon. </p>
  
  <p>Further, I was hoping to store the icons locally, but when I set the icons they do not come through when I set the background to find the images locally. My file structure is as follows: </p>
  
  <p>CSS <br>
  --> CssImages <br>
  --> -- down-chevron.png<br>
  --> -- line-spacing.png<br>
  main.css</p>
  
  <p>and I was importing them in this format in my css file. </p>
  
  <pre><code>background: transparent url("CSS/CssImages/down-cheron.png")
  </code></pre>
  
  <p>Unfortunately this didn't seem to work, however, upon inspecting in developer tools the images were being pulled through to the local host. </p>
  
  <p>My HTML is here:</p>
  
  <pre><code> &lt;div class="tool-bar"&gt;
      &lt;div class="options-container"&gt;
          &lt;select&gt;
              &lt;option value = "times-new-roman"&gt;Times New Roman&lt;/option&gt;
              &lt;option value = "arial"&gt;Arial&lt;/option&gt;
              &lt;option value = "courier-new"&gt;Courier New&lt;/option&gt;
              &lt;option value = "verdana"&gt;Verdana&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="options-container font-container"&gt;
          &lt;select&gt;
              &lt;option value = "8"&gt;8&lt;/option&gt;
              &lt;option value = "10"&gt;10&lt;/option&gt;
              &lt;option value = "12"&gt;12&lt;/option&gt;
              &lt;option value = "14"&gt;14&lt;/option&gt;
              &lt;option value="16"&gt;16&lt;/option&gt;
              &lt;option value="18"&gt;18&lt;/option&gt;
              &lt;option value="20"&gt;20&lt;/option&gt;
              &lt;option value="22"&gt;22&lt;/option&gt;
              &lt;option value="24"&gt;24&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="options-container spacing-container"&gt;
          &lt;select&gt;
              &lt;option value="1"&gt;1&lt;/option&gt;
              &lt;option value="1.5"&gt;1.5&lt;/option&gt;
              &lt;option value="2.0"&gt;2.0&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My Css snippet is here: </p>
  
  <pre><code>.tool-bar {
      width: 100%;
      height: 100%;
      background-color: #a19f9f;
      float: left;
      display: inline;
  }
  
  .options-container {
      padding: 10px;
      width: 20%;
      border-left: 3px solid #aaaaaa;
      background-color: #ffffff;
      float:left; display:inline;
  }
  
  .font-container {
      width: 5%;
  }
  
  .spacing-container{
      width: 6%;
  }
  
  .options-container select {
      width: 100%;
      font-size: 20px;
      border: 0;
      line-height: 1;
      height: 34px;
      outline: none;
      background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat center;
      display: block;
      margin-right: 5px;
      -webkit-appearance: none;
      background-position-x: 215px;
  }
  
  .font-container select {
      background-position-x: 20px;
  }
  
  .spacing-container select {
      background: url("https://image.flaticon.com/icons/svg/1827/1827633.svg") 0 0;
      background-position-x: 0;
  }
  </code></pre>
  
  <p>I appreciate your time and your advice with the matter.</p>
  
  <p>Thank you, </p>