How to get image url in css inside a public folder in Rails?


Tags: css,ruby-on-rails

Problem :

I have a css located inside the public/ folder in rails. I want to locate the images inside the app/assets/images/ folder for a background in the css. The code below doesn't seem to work:

background: url("bg-noise.png");

This is normally used for css inside the app/assets/stylesheets/ folder. Can't make it work inside the public folder.



Solution :

You have two alternatives. If you can rename the file and use the asset pipeline with SCSS, then rename the style to .css.scss and replace

background: url("bg-noise.png");

with the image-url SCSS helper.

background: image-url("bg-noise.png");

It will automatically resolve the path.

Another solution is to rename the file to .css.erb and you'll be able to use ERB code inside the file.

background-image: url(<%= asset_path 'bg-noise.png' %>)

The last solution is to hard-code the path.

background: url("/assets/bg-noise.png");

I encourage you to use the first option.


    CSS Howto..

    How to style a single QToolButton using qss/css

    how to align all text on left side and image on right size

    How to force the horizontal scroll bar to appear?

    How to define margin (CSS) around an absolutely positioned, floating element?

    How to add CSS if element has more than one child?

    How to force a list to be vertical using html css

    How to find a first td in a tr using tr class name in CSS? [duplicate]

    how to add a fixed position Box on left side of each post [closed]

    How do I get nested divs to be same height and expand to the largest of the heights?

    Jquery Show Hide with attribute

    How to adjust font awesome down arrow via css

    How I can change the position of 3 div's to be side by side?

    How can I create a color with values for green, blue, orange, and gold only?

    How to fix the my Anchor link issue [duplicate]

    how to achieve the moving sparking effect with css and javascript as in css-tricks.com footer

    How to get an automatic effect of rosace in css ?

    How can I stretch my navigation and content area height to 100% in CSS?

    How Do I Wrap Text So My Accordions Image Does Go OutSide My aAccordion

    How to modify a general css using javascript and jquery and return the result as a new id

    How to inherit CSS using Less?

    How to increase the gap between text and underlining in CSS

    How to force free CSS resize on input element when its width is specified?

    How do I align my navbar so it's permanently in the middle of my white box (without padding etc)?

    How to layout list items in groups

    How to finish my modal ajax code to work correctly?

    How to let Fancybox Next and Previous button stay visible

    How to set two background color to one element in CSS?

    how to do drop down list

    bootstrap navbar how to give it a max width

    How to create sub-labels for input elements using HTML