Forum: Ruby on Rails css url paths when moving it to a different folder

5352e063f844eed9d9c2777f20246e31?d=identicon&s=25 Dmitrij B. (dmitrij_b)
on 2013-03-10 21:48
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.
280b78a61a968391b7e07e912be102a8?d=identicon&s=25 Robert Walker (robert4723)
on 2013-03-11 22:29
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
--------------
#div_with_back_image {
  background-image: url('rails.png');
  height: 100px;
}

This is working for me in development mode at least.
280b78a61a968391b7e07e912be102a8?d=identicon&s=25 Robert Walker (robert4723)
on 2013-03-11 22:44
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:
http://guides.rubyonrails.org/asset_pipeline.html#...
Please log in before posting. Registration is free and takes only a minute.
Existing account

NEW: Do you have a Google/GoogleMail, Yahoo or Facebook account? No registration required!
Log in with Google account | Log in with Yahoo account | Log in with Facebook account
No account? Register here.