title: How do I change background color of li elements
body: <p><a href="https://jsfiddle.net/oski369/2Lzc6q95/" rel="nofollow">https://jsfiddle.net/oski369/2Lzc6q95/</a></p>
  
  <p>When I plug it into js fiddle, the background color of each li changes according to it's class (even or odd) as I want them to.  However when I run the same code in my browser the background colors are ignored.  I also note that in the fiddle the "cover" property I put in my background-image is ignored while it works fine in my browser.</p>
  
  <p>I am using bootstrap in my text editor while obviously that is not the case in fiddle.  Idk if this could be the issue but how would I accomplish the same alternating color change between list items that appears in the fiddle in my text editor? </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/&gt;
   &lt;link rel="stylesheet" type="text/css" media="all" href="css/animate.min.css"/&gt;
    &lt;link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"/&gt;
   &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/&gt;
   &lt;link href="css/stockData.css" rel="stylesheet" type="text/css"/&gt;
   &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body class="text-primary"&gt;
    &lt;h1 &gt;StockData&lt;/h1&gt;
    &lt;div class="row" id="stockTable"&gt;
      &lt;ul&gt;
         &lt;li class="odd"&gt;
          &lt;span class="col-md-4"&gt;Ticker&lt;/span&gt; 
          &lt;span class="col-md-4"&gt;% Change&lt;/span&gt; 
          &lt;span class="col-md-4"&gt;Position&lt;/span&gt;
        &lt;/li&gt; 
        &lt;li class="even"&gt;
          &lt;a class="col-md-4"&gt;AAPL&lt;/a&gt;
          &lt;span class="col-md-4"&gt;+3%&lt;/span&gt;
          &lt;span class="col-md-4"&gt; &lt;span class="holding"&gt;5.4&lt;/span&gt;&lt;span&gt;%&lt;/span&gt; &lt;span&gt;Short&lt;/span&gt;&lt;/span&gt;
        &lt;/li&gt;
        &lt;li class="odd"&gt;
          &lt;span class="col-md-6"&gt;Portfolio&lt;/span&gt; 
          &lt;span class="col-md-6"&gt;+2.4%&lt;/span&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
     &lt;script src="stockData.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#stockTable {
      width:38%;
      margin-left: 2px;
  }
  .odd{
    background:rgba(0,0,0,.8);
  }
  .even{
    background:rgba(0,0,0,.6);
  }
  ul{
      list-style-type:none;
  }
  body{
      background-image:url('http://evilcorps.com/wp-content/uploads/2014/12/wall_street_1920.jpg');
      background-size: cover;
  }
  h1{
      margin-left: 2px;
  }
  </code></pre>