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???
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:
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);
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:
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.