Relative links in CSS, after moving Wordpress

Question

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?

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?

Solution 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);

Solution 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.

Solution 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.