How to Link to Images in CSS file in RoR 3.2 Project?


Tags: css,image,ruby-on-rails-3.2,asset-pipeline

Problem :

newb to RoR, but I'd prefer to NOT hard code my image path in application.css:

.nav {
  padding-top: 10px;
  height: 60px;
  background-image:url('/assets/static/bg-nav.png');
  background-repeat:repeat-x;
}

I'm also getting errors other places because of this. It took me to a couple tries to find that full path, but is there another tag I'm supposed to use? I previously had:

background-image:url('../images/static/bg-nav.png')

Which makes sense if you look at the directory tree, but somehow turns into something else. If I need to inline some rails here, does the file need to change to .css.erb?

Thank you.



Solution :

nevermind, i just started reading up more on the asset pipeline. here's an example of how to programmatically insert the appropriate path within your .css files (and no, do not need to be of other extension type):

.class { background-image: url(<%= asset_path '/mysubdirectory/myimage.png' %>) }

from: http://guides.rubyonrails.org/asset_pipeline.html

You begin the path from the app/assets/images/


    CSS Howto..

    How to add scrollbar in this CSS javascript pop up window?

    How to properly wait for browser reflow/repaint to finish

    How to make a div grow with its children when inline-blocks don't fit anymore

    how to stack elements using CSS

    How to select “label for=list[]” in CSS?

    How to use Css to make CellList flow Horizontally rather than Vertically? (GWT & CSS)

    How do you vertically align the body tag of an HTML document?

    How can I prevent a flex container from overflowing/underflowing?

    How can I make clickable list with sublinks ?

    how to keep elements in one row in css

    CSS class is missed after jQuery replaceWith. How to fix?

    How to increase rotate value

    How to remove hover state

    How can I render country flags as a ribbon, using CSS only?

    CSS - How to set an elements height as a % of a container with auto height?

    CSS how can i turn the scrolling off during the animation?

    Using html5 canvas as a background, how to position a youtube embed on top of it using css to be resolution independent?

    How to pop out an image inside a ul li div when the css surrounding it won't let you

    How to create a 'p' tag using css [closed]

    Reposition and show live results upwards

    How to make a pure css based dropdown menu?

    Some doubts about how exactly grid BootStrap component work? [closed]

    How to create Curved & Overlapping Menu Tabs in CSS

    How to create a lightbox like this [closed]

    How to use a custom image for cursor/thumb in html input type range

    How do I move the background image of a DIV based on the scrollbar movement?

    jQuery hide show id

    With CSS, how would I align this banner and navigation menu to XHTML 1.0 Strict specifications?

    How to wrap a div vertically and then horizontally

    How can I mark it up? [closed]