title: CSS background image not showing up on rails site
body: <p>I'm trying to use the background-image css property with a website I'm building with Ruby on Rails.</p>
  
  <p>I've tried several different variations of background-image: url, background: url, with and without quotations, and several paths to the image. The image is currently located in app/assets/images/upload.png.</p>
  
  <pre><code>background: url(upload.png);
  </code></pre>
  
  <p><strong>custom.css.scss</strong></p>
  
  <pre><code>/* UNIVERSAL */
  
  body {
  background-color: black;
  padding-top: 8px;
  width: 800px;
  margin-left: auto;
  margin-right: auto;
  font-family: arial, sans-serif;
  font-size: 16px;
  }
  
  .content {
  background-color: white;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  padding: 1px 15px;
  }
  
  h2 {
  font-size: 18px;
  }
  
  p {
  font-size: 16px;
  }   
  
  ol {
  font-size: 16px;
  }
  
  
  /* NAVIGATION */
  
  ul {
  padding: 0px;
  }
  
  #navtop {
  float: right;
  display: inline-block;
  position: relative;
  bottom: 47px;
  right:4px;
  letter-spacing:1px;
  }
  
  #topnavcontainer {
  margin-bottom: -40px;
  
  }
  
  #navtop li, #navbottom li, #navbuttons li {
  display: inline;
  margin: 0px;
  padding: 0px;
  }
  
  #navbuttons {
  word-spacing: 25px;
  position: relative;
  left: 400px;
  bottom: 60px;
  display: inline-block;
  }
  
  #navbottom {
  text-align: center;
  word-spacing:90px;
  letter-spacing:1px;
  margin-top:25px;
  }
  
  #navtop a:link, #navbottom a:link, #navtop a:visited, #navbottom a:visited  {
  text-decoration: none;
  font-size: 12px;
  color: #999999;
  }
  
  #navtop a:hover, #navbottom a:hover {
  color: white;
  }
  
  #uploadbutton a:link, #uploadbutton a:visited, #viewbutton a:link, #viewbutton a:visited  { 
  text-decoration: none;
  border-style:solid;
  border-width:3px;
  border-color:#666666;
  padding: 5px;   
  color: white;
  font-size: 14px;
  font-weight: bold;
  letter-spacing:2px;
  }
  
  #uploadbutton a:hover {
  color: #FF0000;
  }
  
  #viewbutton a:hover {
  color: #0066FF;
  }   
  
  /*style the main menu*/
  .myMenu {
  margin:0;
  padding:0;
  text-align: left;
  }
  
  .myMenu li {
  list-style:none;
  float:left;
  
  
  }
  
  .myMenu li a:link, .myMenu li a:visited {
  display:block;
  text-decoration:none;
  
  padding: 0.5em 1em;
  margin:0;
  
  
  }
  
  .myMenu li a:hover {
  background-color:black; 
  }
  
  /*style the sub menu*/
  .myMenu li ul {
  position:absolute;
  visibility:hidden;
  margin:0;
  padding:0;
  }
  
  .myMenu li ul li {
  display:inline;
  float:none;
  }
  
  .myMenu li ul li a:link, .myMenu li ul li a:visited {
  background-color:black;
  width:55px;
  }
  
  .myMenu li ul li a:hover {
  background-color:#999999;
  }
  
  /* HOME PAGE */
  
  #homepage {
  text-align: center;
  }
  
  #homeheadline {
  color: white;
  background-color: #333333;
  font-weight:normal;
  border-style:solid;
  border-width:6px;
  border-color:#333333;
  letter-spacing:1px;
  margin-bottom: 45px;
  }
  
  a#clickhere , a#clickhere:visited {
  text-decoration: none;
  color: #0066FF;
  }
  
  #videotitle {
  color: #FF0000;
  position: absolute;;
  bottom: 70px;
  display: inline;
  font-size: 19px;
  left: 60px;
  }
  
  #videolist {
  position: absolute;
  left: 40px;
  display: inline-block;
  }
  
  #audiencetitle {
  color: #0066FF;
  position: absolute;
  bottom: 70px;
  left: 340px;
  display: inline;
  font-size: 19px;
  }
  
  #audiencelist {
  position: absolute;
  display: inline-block;
  left: 320px;
  }
  
  a.greenbutton, a.greenbutton:visited, {
  font-size: 14px;
  color: white;
  font-weight: bold;
  text-decoration: none;
  background-color: #009900;
  border-style:solid;
  border-width:7px;
  border-color:#009900;
  letter-spacing:1px;
  }
  
  #homead {
  margin-bottom: 25px;
  margin-top: 45px;
  display: block;
  }
  
  #lists {
  width: 538px;
  height: 100px;
  position: relative;
  margin-bottom: 35px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  }
  
  /* FORMS */
  
  .greenbutton {
  font-family: arial, sans-serif;
  font-size: 14px;
  color: white;
  font-weight: bold;
  text-decoration: none;
  background-color: #009900;
  border-style:solid;
  border-width:3px;
  border-color:#009900;
  letter-spacing:1px;
  margin-bottom: 40px;
  }
  
  .textinput {
  border: 1px solid #bbb;
  height: 18px;
  width: 300px;
  margin-bottom:30px;
  }
  
  .signform {
  text-align: center;
  width:300px;
  margin-left: auto;
  margin-right: auto;
  
  }
  
  .signformfields {
  text-align: left;
  }
  
  #error_explanation {
  color:#f00;
  font-size: 16px;
  ul { list-style: none;
     margin: 0 0 18px 0;
     }
  }
  
  .field_with_errors {
   @extend .control-group;
   @extend .error;
   }
  
  /* Upload Menu */
  
  #uploadpage {
  height: 580px;
  
  }
  .uploadnav ul {
  list-style-type: none;
  }
  
  .uploadnav {
  width: 200px;
  text-align: center;
  float:left;
  
  
  }
  
  .uploadbox {
  background-color: black;
  background-image: url( image_path ("upload.png"));
  border-style:solid;
  border-width:25px;
  border-color: black;
  margin-top: 20px;
  
  }
  
  .uploadgreybox {
  background-color: #CCCCCC;
  border-style:solid;
  border-width:25px;
  border-color: #CCCCCC;
  margin-top: 20px;
  }
  
  .uploadtext {
  color: white;
  background-color: black;
  padding: 5px;
  }
  
  .uploadgreytext {
  color: #666666;
  background-color: #CCCCCC;
  padding: 5px;
  }
  
  
  
  .uploadpagecontent {
  
  float:right;
  }
  </code></pre>