# Css - location of files

**URL:** <https://www.ruby-forum.com/t/css-location-of-files/64747>\
**Category:** Rails\
**Created:** [August 15, 2006, 2:18pm UTC](https://www.ruby-forum.com/t/css-location-of-files/64747 "2006-08-15T14:18:31Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![pieter](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/82dd89/32.png) [@pieter](https://www.ruby-forum.com/u/pieter)\
**Post date:** [August 15, 2006, 2:18pm UTC](https://www.ruby-forum.com/t/css-location-of-files/64747/1 "2006-08-15T14:18:31Z")

</div>

Hi all.

I have the following scenario.

[http://myapp/site1](http://myapp/site1) is using \<%= stylesheet\_link\_tag ‘myapp\_standard’ %\>  
to define the stylesheet for layout, I have myapp\_standard.css in  
/public/stylesheets and it works fine.

However, in the stylesheet I define a image to use for my site  
background. eg:  
html, body{  
background-image: url(mysite\_background.jpg);  
padding-top: 10px;  
}

It is not working - I tried placing the images in /public/images and  
publiv/images/mysite - no luck…

Can I run ruby code in my stylesheet? To do something like:  
html, body{  
background-image: \<%= image ‘mysite\_background.jpg’ %;  
padding-top: 10px;  
}

Any other suggestions on a best practise for this???

Thanks!  
Pieter

---

<div class="post-metadata">

**Author:** ![pieter](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/82dd89/32.png) [@pieter](https://www.ruby-forum.com/u/pieter)\
**Post date:** [August 15, 2006, 2:20pm UTC](https://www.ruby-forum.com/t/css-location-of-files/64747/2 "2006-08-15T14:20:25Z")

</div>

Pieter,

When specifying a background image URL the tendency of the browser is to  
look for an image in a path relative to the CSS include file.  
Therefore, when you specify:

html, body  
{  
background-image: url(mysite\_background.jpg);  
}

It will actually look for the file in the same directory as your  
stylesheet. So you need to change the reference to either:

background-image: url(…/images/mysite\_background.jpg); // Relative

or

background-image: url(/images/mysite\_background.jpg); // Absolute

As for your other question of dynamically generating CSS, you might want  
to reference the following article:

[http://blog.hasmanythrough.com/articles/2006/03/23/dirt-simple-rcss-temp](http://blog.hasmanythrough.com/articles/2006/03/23/dirt-simple-rcss-temp)  
lates

Regards,  
Dennis

---

<div class="post-metadata">

**Author:** ![pieter](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/82dd89/32.png) [@pieter](https://www.ruby-forum.com/u/pieter)\
**Post date:** [September 4, 2006, 2:45pm UTC](https://www.ruby-forum.com/t/css-location-of-files/64747/3 "2006-09-04T14:45:25Z")

</div>

Is the image in public/images ?  
If it’s there and you have the path in the css definition correct it  
should work.

Stuart

---

<div class="post-metadata">

**Author:** ![pieter](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/82dd89/32.png) [@pieter](https://www.ruby-forum.com/u/pieter)\
**Post date:** [September 4, 2006, 2:45pm UTC](https://www.ruby-forum.com/t/css-location-of-files/64747/4 "2006-09-04T14:45:25Z")

</div>

> From the stylesheets point of view, it is in the “/stylesheets” directory  
> and the images are in the “/images” so you need ot direct the stylesheet  
> properly

I have always just done:  
background-image: url(/images/mysite\_background.jpg);  
OR if the app is not run at the top level then…  
background-image: url(…/images/mysite\_background.jpg);

The second way is a little more portable.

mark

---

<div class="post-metadata">

**Author:** ![pieter](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/82dd89/32.png) [@pieter](https://www.ruby-forum.com/u/pieter)\
**Post date:** [September 4, 2006, 2:45pm UTC](https://www.ruby-forum.com/t/css-location-of-files/64747/5 "2006-09-04T14:45:25Z")

</div>

tx this helped.

---

<div class="post-metadata">

**Author:** ![pieter](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/82dd89/32.png) [@pieter](https://www.ruby-forum.com/u/pieter)\
**Post date:** [September 4, 2006, 2:45pm UTC](https://www.ruby-forum.com/t/css-location-of-files/64747/6 "2006-09-04T14:45:29Z")

</div>

On 8/11/06, Pieter B. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:

> [http://myapp/site1](http://myapp/site1) is using \<%= stylesheet\_link\_tag ‘myapp\_standard’ %\>  
> to define the stylesheet for layout, I have myapp\_standard.css in  
> /public/stylesheets and it works fine.

> However, in the stylesheet I define a image to use for my site  
> background. eg:  
> html, body{  
> background-image: url(mysite\_background.jpg);  
> padding-top: 10px;  
> }
> 
> It is not working - I tried placing the images in /public/images and

If you have the image at /public/images/mysite\_background.jpg your CSS  
value would be:

background-image: url(/images/mysite\_background.jpg);

– James

---

<div class="post-metadata">

**Author:** ![pieter](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/82dd89/32.png) [@pieter](https://www.ruby-forum.com/u/pieter)\
**Post date:** [September 4, 2006, 2:45pm UTC](https://www.ruby-forum.com/t/css-location-of-files/64747/7 "2006-09-04T14:45:25Z")

</div>

Hi Pieter,

Images in a stylesheet are relative to your stylesheet location. So,  
in your example the image would need to be in /public/stylesheets.  
Alternatively, you could use …/images/ to reference your  
/public/images directory.

Tom

On 8/11/06, Pieter B. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:

> html, body{  
> padding-top: 10px;  
> [http://lists.rubyonrails.org/mailman/listinfo/rails](http://lists.rubyonrails.org/mailman/listinfo/rails)

–  
Tom D.

[http://atomgiant.com](http://atomgiant.com)  
[http://gifthat.com](http://gifthat.com)