Css - location of files

Hi all.

I have the following scenario.

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

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
lates

Regards,
Dennis

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

Stuart

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

tx this helped.

On 8/11/06, Pieter B. [email protected] wrote:

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

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. [email protected] wrote:

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


Tom D.

http://atomgiant.com
http://gifthat.com