Relative links in CSS, after moving WordPress

2 Views

I created a blog with WordPress on a temporary test domain. I put it in the main directory, not a folder. Now I want to move it to the correct website, in a folder. I can update all of the MySQL values for the site URL, and the relative path links work just fine.

The problem is that I can’t seem to make my CSS path links work. I realize that my problem is that they are relative to the CSS file, in the WordPress theme, and not the page. But how can I fix this?

Read More

Here is an example: 

#topNav {background:#3a93c3 url(wp-content/uploads/2011/07/blueNav.jpg) repeat-x;}

I have tried adding ‘./’, ‘../’, and ‘../../’ to the beginning, but it doesn’t work at all.

Question

Why aren’t relative paths working in CSS on my WordPress site?

Post Views: 2

Related posts

Leave a Reply

5 comments

  1. you really shouldn’t put theme images in the upload folder. you should really store your theme images inside your theme folder. like

    wp-content/
    themes/
        mytheme/
            images/
                1.jpg
            style.css

    so in your css, you can just do 

    background:transparent url(images/1.jpg);

  2. You can also use the / which is the root of your website. So something like url(/yourfolder/wp-content/…

    If you want to use relative paths, you have to go to the right directory. With the ../ you used before. ../ 1 dir up, add another ../ 2 dir’s up, and so on.

  3. I just looked my companies corporate blog and I have a couple different ways, there was an old theme that was legacy, and new theme that I made.

    First the original base theme used absolute paths: 

    #blogTour {
    background: url('http://www.domain.com/wp-content/uploads/2010/09/signup.png');
}

    This generally wasn’t ideal since I had to regional-ize blogs, they would have a different URL and I didn’t want to use a PHP variables ($SERVER[‘DOCUMENT_ROOT’]), maybe you can though!

    On the new theme that I made, I put the assets under the theme directory…are you able to put the images within the themes directory?

    #blogFeed {
    background: url('_images/icons/blog-feed.png');
}

    Lastly try wrapping the contents of URL with either back-ticks url(‘content’), I remember reading somewhere that when pumping CSS through a preprocessor (WordPress/PHP) it is generally good practice to wrap your strings with back-ticks.

  5. Old question, but I see it’s not really answered.
    As mentioned, it is not best practice to load theme related stuff from wp-content/uploads/.

    But, if you really want to use something in wp-content/uploads you would use:

    #topNav {background:#3a93c3 url("../../uploads/2011/07/blueNav.jpg") repeat-x;}

    That path will work.

    When calling a relative URL from theme php or css, the base url becomes wp-content/themes/{theme-name}/ so you need to backup two directory levels (../../) to wp-content/.