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

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
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#...
This topic is locked and can not be replied to.