CSS background image not showing up on rails site
background-image, css, ruby-on-rails
Solution
The most correct way:
background-image: url(<%= asset_path 'upload.png' %>)
See the Guide for details: http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets (sec. 2.2.1 CSS and ERB)
NOTE: If you're doing this in your application.css then add .erb extension to it to become application.css.erb
Problem
I'm trying to use the background-image css property with a website I'm building with Ruby on Rails. 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. ``` background: url(upload.png); ``` custom.css.scss ``` /* 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; } ```