Go down Image Path

HTML & CSS
1

Hi,

You know how you can use …/ to go up image paths.

Well, I have a secondary stylesheet for a rating system running in a different directory and I want to use an image from my root images folder.

ratings/template/styles.css

images/rightpanelbg.jpg

So, as you would guess, when I put the following into the CSS, the image doesn’t show because it’s looking at (ratings/template/images) for it.

#ratings .ratingsContainer {
background: url(images/rightpanelbackground.jpg) repeat-x;

So, How do I get it to point to the root image folder ?

Thanks.

2

I didn’t really understand the question. I know I’ve tried explaining that myself before. But if you only want to get to the root it should look like this background: url(/images/rightpanelbackground.jpg) repeat-x;

3

Have you tried this?


#ratings .ratingsContainer {
background: url(../../images/rightpanelbg.jpg) repeat-x;

But you can ALWAYS reference directly from the root. So if your desired path is the image folder directly off the root, the this will work


#ratings .ratingsContainer {
background: url(/images/rightpanelbg.jpg) repeat-x;

*realizing that, in your post, you referenced two different filenames for the image (rightpanelbg.jpg and rightpanelbackground.jpg) - use whichever is correct

4

Yeah, I made a mistake with the filenames, no worries about that.

Anyways, I’m trying to reference directly from the image root and I tried the / before images but it didn’t work.

background: url(/images/rightpanelbg.jpg) repeat-x;

5

Open up firebug and go to the element .ratingsContainer

You should see the background property attached, and on hover you should see the full destination of where it is. Does it match where it SHOULD be pointing?

Try a full URL (http://sitehere.com/images/blah.jpg) and see if that even works also.

6

The following in the stylesheet says ’ Failed to load given URL ’

url(“/images/rightpanelbackground.jpg”) repeat-x

When using a full URL it works, but that’s hardly convenient or practical.

7

Ahh… I’ve clocked the problem.

When I put a root relative link in stytlesheet…

background: url(/images/rightpanelbg.jpg) repeat-x;

It directs too the local host root…

http://127.0.0.1/portfoliosite/images/rightpanelbackground.jpg

When I up the root in the stytlesheet…

background: url(../images/rightpanelbg.jpg) repeat-x;

It directs to ratings folder…

http://127.0.0.1/portfoliosite/ratings/images/rightpanelbackground.jpg

Obviously, the root relative will work when the websites live on the server but, how would I prevent it from bypassing /portfoliosite on localhost?

Thanks.

8

You can set up your local environment to work like the server environment by editing your hosts file. What local environment are you using?

9

Honestly I’d just not worry about it for now on your local testing. The work you’d have to do isn’t really worth it. I assumed editing the hosts files isn’t too hard, but I’d just leave it be for now. You’ll remember to fix it when it comes to upload time and your CSS isn’t showing.

10

Nah, it’s really easy to set up a local environment to match your remote one, and it’s really convenient to do so—especially if using PHP etc. I use MAMP on the Mac, the setup instructions for which are very simple:

http://foundationphp.com/tutorials/vhosts_mamp.php

An nice PC equivalent is XAMPP.

(BTW, if you use MAMP Pro, you don’t need to do that setup, as it’s done for you. Not sure if XAMPP has an equivalent feature.)

11

Apache HTTP Server 2.2 alongside PHP latest.

12

Which from what I’ve seen in his ilnk, still seems like too much work just for some local testing.