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..

    CSS. How to add small image on background?

    How to convert css margin value to pixels with just plain javascript?

    How do you apply a fading overlay to an image in CSS?

    Big Cartel - Slideshow Questions

    How to not apply a webpage's CSS on the div I am inserting into it via content scripts?

    How to get image info from css into MasterPage'gridview?

    How can I use CSS pseudo-classes with GWT's UiBinder?

    How to apply jquery ui styling on dynamically generated elements

    How to display a portion of an image with CSS?

    How can I force a dynamic
      to be 100% the height of it's parent, no more, no less?

    CSS attribute selectors: how to escape newlines within attribute value?

    How to stick a background behind the navbar?

    How to change overlay whole div by an image via CSS

    How to modify the CSS Properties (height width) of a div element via JQuery?

    Vimeo videos not showing up in ShadowBox

    css how to make the background image padding to right

    Javascript slide showing the last image 5 times

    how to add multiple images to a css header?

    How to generate width CSS from JavaScript / C#

    How to scroll a fixed div when I resize the browser window

    How to create an div background that is not affected by page zoom with CSS

    How to scroll jQuery ui tabs?

    How to CSS style angular directive?

    How to force font-weight on all children, but respect the nested depth

    How to define class in CSS

    How to view the compiled css from sass files in ruby on rails?

    How to flip an image horizontally halfway through an animation

    How do I align the list items in an
      with my

      ?

    How to achieve “background-image: cover” CSS effect for dynamic images?

    JQuery: how to make this variable negative before declaring it as a CSS value?