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?

what is the absolute path of your CSS file, and of the wp-content directory? — Nathan Manousos
– Nathan Manousos, Commented Nov 12, 2011 at 1:44
example.com/blog/wp-content/themes/boilerplate/style.css and example.com/blog/wp-content — bozdoz
– bozdoz, Commented Nov 12, 2011 at 1:54
Is my best/only option to change everything to url(/blog/wp-content/uploads/2011/07/blueNav.jpg)? — bozdoz
– bozdoz, Commented Nov 12, 2011 at 1:54
What is the URL to your css file? You should be able to use some combination of ../ — Abhi Beckert
– Abhi Beckert, Commented Nov 12, 2011 at 9:39
I think the problem is that it is on a WordPress site. No combination of ../ does anything. For example, when I type ../../../ the URL in the CSS turns out to be example.com/blog/wp-content/themes/boilerplate/../../../…. Which, doesn't work obviously. — bozdoz
– bozdoz, Commented Nov 12, 2011 at 17:41

Funky Dude · Accepted Answer · 2011-11-21 15:11:43Z

11

+50

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

edited Nov 21, 2011 at 15:11

answered Nov 17, 2011 at 20:21

Funky Dude

3,9672 gold badges25 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

bozdoz Over a year ago

I will try this, just for fun, and get back to you in a sec

bozdoz Over a year ago

Did not work. It changes the URL to this: h t t p ://www.example.com/blog/wp-content/themes/boilerplate/../images/blueNav.jpg Notice that it put the ../ into the URL.

Funky Dude Over a year ago

you dont by any chance have a base tag in your template like <base href="example.com/blog" />

Funky Dude Over a year ago

oh wait. i think u can just do background:transparent url(images/1.jpg);

bozdoz Over a year ago

Why would a transparent background help?

|

Niels · Accepted Answer · 2011-11-12 01:43:20Z

1

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.

answered Nov 12, 2011 at 1:43

Niels

50.1k4 gold badges68 silver badges86 bronze badges

3 Comments

Abhi Beckert Over a year ago

Relative paths will be working in your CSS files, they're rock solid reliable. But you may be using them wrong. Can you edit your question to include more details, such as what the URL is to the css file?

bozdoz Over a year ago

I think the problem is that it's a WordPress site. I think something is happening when WordPress processes the CSS file. I can get relative URLs to work in my other sites, just not this one.

Johannes P. Over a year ago

@bozdoz Nopes, WordPress is definitely not responsible. It for one does not "process the CSS file" at all, the stylesheet is included in the <head> of the theme as it would be in any ol' website. Also, relative paths can be used in wp.

MiFiHiBye · Accepted Answer · 2011-11-12 02:21:24Z

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.

Virgil Shelton · Accepted Answer · 2011-11-12 09:35:12Z

0

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.

answered Nov 12, 2011 at 9:35

Virgil Shelton

7805 silver badges17 bronze badges

3 Comments

bozdoz Over a year ago

That would be a good idea, but this is on a WordPress site. I'm trying to manipulate an already created template. WordPress seems to be changing the URL with however it processes the CSS files.

Virgil Shelton Over a year ago

You can do this with WordPress, simply follow the instructions in the link I referenced, and in your WordPress themes header.php add in a stylesheet link to the css.php file and you'll be in business. Let me know if you need a code example.

bozdoz Over a year ago

It's a good idea in general, but in this example, it's much easier for me to just do a find and replace to make absolute paths in the CSS.

B. Shea · Accepted Answer · 2019-07-25 15:21:18Z

0

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

edited Jul 25, 2019 at 15:21

answered Jul 25, 2019 at 15:05

B. Shea

83715 silver badges29 bronze badges

Collectives™ on Stack Overflow

Relative links in CSS, after moving Wordpress

Question

5 Answers 5

8 Comments

3 Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Question

5 Answers 5

8 Comments

3 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related