title: Place url image on top of black background color html/css
body: <p>I'm currently creating a site where I would like to place images hosted on imgur on top of a black background using html/css/sinatra. I have attempted to use z-index for each element, but cannot get the image to be <em>on top</em> of the black background (it is stuck behind the black background). It is a random generated quote website. The code is as follows.</p>
  
  <pre><code>&lt;body background="cartier.jpg"&gt;
  &lt;div class="container"&gt;
  
  &lt;script language="JavaScript" id="quote"&gt;
  var Quotation=new Array()
  Quotation[0] = "insert quote here";
  Quotation[1] = "insert quote here";
  Quotation[2] = "insert quote here";
  
  var Q = Quotation.length;
  var whichQuotation=Math.round(Math.random()*(Q-1));
  function showQuotation(){document.write(Quotation[whichQuotation]);}
  showQuotation();
  
  &lt;/script&gt;&lt;br&gt;&lt;br&gt;
  
  &lt;/div&gt;
  &lt;div class="button" type="text/css"&gt;
    &lt;a href="." STYLE="text-decoration: none"&gt;GIVE ME MORE GUIS&lt;/a&gt;
  &lt;/div&gt;
  &lt;!-- &lt;div class="picture" style="background-image: url(&lt;%= randomized_background_image %&gt;;"&gt;)&gt;
  &lt;/div&gt; --&gt;
  &lt;style type="text/css" class="image"&gt;
    html {
      background: url(&lt;%= randomized_background_image %&gt;) no-repeat center center fixed; 
    }
  &lt;/style&gt;
  </code></pre>
  
  <h2>    </h2>
  
  <pre><code>.container {
    /*margin: 20px auto;*/
    /*z-index: 3;*/
    width: 500px;
    height: 505px;
    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    /*border: 1px dotted black;*/
    font-size: 50px;
    font-weight: bold;
    color: white;
  }
  
  #quote {
    z-index: 2;
  }
  
  /*.picture {
    position: fixed;
    z-index: 0;
    width: 900px;
    height: 505px;
    margin-top: -640px;
    margin-left: 430px;
    border: 1px dotted white;
  /*  background: url("http://i.imgur.com/armyxnE.png")
  */
  
  .image {
    z-index: 1;
  }
  
  style {
   z-index: 1;
  }
  
  html {
    z-index: 1;
  }
  
  .button {
     display:block;
     margin:0 auto;
     width: 389px;
     height: 46px;
     line-height: 46px;
     vertical-align: text-middle;
     text-align: center;
     color: #fffaff;
     font-family: sans-serif;
     font-size: 35px;
     font-weight: bold;
     font-style: normal;
     text-shadow: none;
  }
  .button &gt; span {
     display: -moz-inline-block;
     margin: auto 0;
  }
  
  
  a:link {
      text-decoration: none;
      color: white;
      margin: auto 0;
  }
  
  
  body {
    /*position: absolute;
    z-index: 1;*/
    background-color: black;
    position: relative;
    z-index: 0;
  </code></pre>
  
  <h2>    }</h2>
  
  <p>and in my helpers....</p>
  
  <pre><code>def randomized_background_image
    images = ["http://i.imgur.com/armyxnE.png", "http://i.imgur.com/DJF4CoC.png"]
    images[rand(images.size)]
  </code></pre>
  
  <h2>    end</h2>
  
  <p>Someone please help!!!!</p>