Background image defined in stylesheet doesn't display


#1

application.html.erb is correctly finding the stylesheet for my project
via <%= stylesheet_link_tag ‘style1’ %>. My webpages reflect the
styling properly with a few exceptions … the most notable being some
.jpg images defined for background do not display at all. I have those
images in public/images.

The following is the stylesheet code containing the reference to the
image.

#navigation {
width: 180px;
height: 484px;
background: #7da5a8 url(backgrounds/nav-bg.jpg) no-repeat;
}

This worked fine until I retrofitted the webpages into the Rails
framework (which I really like, but which I’m relative new to).

If anyone knows the solution, I would really appreciate it … thanks in
advance!

Rubio


#2

Rob B. wrote:

application.html.erb is correctly finding the stylesheet for my project
via <%= stylesheet_link_tag ‘style1’ %>. My webpages reflect the
styling properly with a few exceptions … the most notable being some
.jpg images defined for background do not display at all. I have those
images in public/images.

So, the URL for the images is images/… relative to the path of your
application.

The following is the stylesheet code containing the reference to the
image.

#navigation {
width: 180px;
height: 484px;
background: #7da5a8 url(backgrounds/nav-bg.jpg) no-repeat;
}
If your stylesheet is in public/stylesheets/styles.css [example], then
the relative path to the images directory is:
url(…/images/…jpg) or url(…/images/backgrounds/image.jpg)
depending on where exactly you placed the files.

Cheers,
Mohit.
4/16/2009 | 12:30 AM.


#3

Mohit S. wrote:
If your stylesheet is in public/stylesheets/styles.css [example], then
the relative path to the images directory is:
url(…/images/…jpg) or url(…/images/backgrounds/image.jpg)
depending on where exactly you placed the files.

Rob B. wrote:

application.html.erb is correctly finding the stylesheet for my project
via <%= stylesheet_link_tag ‘style1’ %>. My webpages reflect the
styling properly with a few exceptions … the most notable being some
.jpg images defined for background do not display at all. I have those
images in public/images.

So, the URL for the images is images/… relative to the path of your
application.

The following is the stylesheet code containing the reference to the
image.

#navigation {
width: 180px;
height: 484px;
background: #7da5a8 url(backgrounds/nav-bg.jpg) no-repeat;
}
If your stylesheet is in public/stylesheets/styles.css [example], then
the relative path to the images directory is:
url(…/images/…jpg) or url(…/images/backgrounds/image.jpg)
depending on where exactly you placed the files.

Cheers,
Mohit.
4/16/2009 | 12:30 AM.

Many thanks Mohit … worked beautifully using the relative path !!
Didn’t expect such a quick response with the correct solution !!

Cheers to you as well !


#4

Rob B. wrote:

Many thanks Mohit … worked beautifully using the relative path !!
Didn’t expect such a quick response with the correct solution !!

Cheers to you as well !

You’re most welcome. I’m not replying for you, it’s a selfish move - I
just asked a question myself, so I’m waiting for answers :stuck_out_tongue:
This is me paying it forward :slight_smile:

Cheers,
Mohit.
4/16/2009 | 12:57 AM.