css url paths when moving it to a different folder

rubyonrails-talk
1

Hey. Its simple quation, but have litle problem with this.

Its my path for css - assets/content/stylsheets/my.css Its path picture for background url - assets/images/picture.gif

I do the following in my.css background: transparent url(../../images/picture.gif).

but the path is not correct, the image is not found. I tried with one ../ and easy images/picture.gif. Not work. When i add picture in folder with css and add path - background: transparent url(picture.gif) all in fine.

2

Dmitrij B. wrote in post #1100975:

Hey. Its simple quation, but have litle problem with this.

Its my path for css - assets/content/stylsheets/my.css Its path picture for background url - assets/images/picture.gif

I do the following in my.css background: transparent url(../../images/picture.gif).

but the path is not correct, the image is not found. I tried with one ../ and easy images/picture.gif. Not work. When i add picture in folder with css and add path - background: transparent url(picture.gif) all in fine.

I find that the easiest way to figure out these relative paths is to look at the paths generated in the HTML in the browser. Once you know the exact path to your assets as seen by the browser it should be pretty easy to deduce the relative path from one asset to another.

Here's a quick example:

<html> <head>   <title>Demo</title>   <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" /> <link href="/assets/blogs.css?body=1" media="all" rel="stylesheet" type="text/css" /> <link href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" type="text/css" />   <script src="/assets/jquery.js?body=1" type="text/javascript"></script> <script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script> <script src="/assets/blogs.js?body=1" type="text/javascript"></script> <script src="/assets/application.js?body=1" type="text/javascript"></script>   <meta content="authenticity_token" name="csrf-param" /> <meta content="bdmRB+glFIwR3P355qcyfHqYlXRDsQfvAENiLTqWYOM=" name="csrf-token" /> </head> <body>   <div id="div_with_back_image"></div> </body> </html>

CSS

3

Robert Walker wrote in post #1101143:

I find that the easiest way to figure out these relative paths is to look at the paths generated in the HTML in the browser. Once you know the exact path to your assets as seen by the browser it should be pretty easy to deduce the relative path from one asset to another.

Sorry, disregard my last reply!

This is the proper way:

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

Taken from: