SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast Albablue89's Avatar
    Join Date
    Jul 2005
    Location
    Scotland
    Posts
    98
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)

    Go down Image Path

    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. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,329
    Mentioned
    191 Post(s)
    Tagged
    4 Thread(s)
    Have you tried this?
    Code:
    #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
    Code:
    #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
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  4. #4
    SitePoint Enthusiast Albablue89's Avatar
    Join Date
    Jul 2005
    Location
    Scotland
    Posts
    98
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    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;
    Quote Originally Posted by ParkinT View Post
    Have you tried this?
    Code:
    #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
    Code:
    #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
    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. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Enthusiast Albablue89's Avatar
    Join Date
    Jul 2005
    Location
    Scotland
    Posts
    98
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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.
    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. #7
    SitePoint Enthusiast Albablue89's Avatar
    Join Date
    Jul 2005
    Location
    Scotland
    Posts
    98
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Ahh.. I've clocked the problem.

    When I put a root relative link in stytlesheet...
    Code:
    background: url(/images/rightpanelbg.jpg) repeat-x;
    It directs too the local host root....
    When I up the root in the stytlesheet...
    Code:
    background: url(../images/rightpanelbg.jpg) repeat-x;
    It directs to ratings folder...
    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. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Albablue89 View Post
    Obviously, the root relative will work when the websites live on the server but, how would I prevent it from bypassing /portfoliosite on localhost?
    You can set up your local environment to work like the server environment by editing your hosts file. What local environment are you using?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  11. #11
    SitePoint Enthusiast Albablue89's Avatar
    Join Date
    Jul 2005
    Location
    Scotland
    Posts
    98
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You can set up your local environment to work like the server environment by editing your hosts file. What local environment are you using?
    Apache HTTP Server 2.2 alongside PHP latest.

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Albablue89 View Post
    Apache HTTP Server 2.2 alongside PHP latest.
    Which from what I've seen in his ilnk, still seems like too much work just for some local testing.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •