Relative links in CSS, after moving Wordpress - html

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?

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

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

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

Answer 4

You can use Server Side Scripting in CSS files, this will you to access the Global Variables of your web server and dynamically match any server you're deploying to.
Please see Server Side Scripting in CSS Files for steps on implementing this.

Answer 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/.