1

I'm coding this Wordpress site http://searchanddevelop.ca/adv/ where I have a stylesheet in which I frequently refer to external background images.

I don't want to hard link these images, but when I use relative links the Wordpress permalink structure breaks everything as it nests inner-pages inside directories (or pseudo-directories, I guess).

Click on a page in the URL I cited and you'll see what I mean.

.area-heading {
    background: url('../../../images/titlechevron.png') no-repeat left;
    margin: 2px 0 11px 2px;
    height: 16px;
    }

Also, if I link things relative to the domain root then when I move the site out of the test directory /adv/ and to its own domain, I expect all the background images will break.

What's the best way to link my images relatively here? I feel like I'm missing a core concept.

4

2 回答 2

1

With WordPress, the easiest way to keep your images intact is to put them into the theme folder - (where your style.css file is) - then, regardless of where you have the site installed, the images are going to be in the same place relative to the style.css file.

Generally, I create a folder called "images" and place this into my theme folder. Then to link to the images, I would be able to use (in the stylesheet) url('images/photo.jpg'), etc.

The theme file will then contain everything needed by the theme to display correctly- all your styling, images, & theme files are together.

于 2013-02-20T17:07:05.597 回答
0

In an external style sheet, all relative urls are expected to be relative to the CSS document.

/styles/screen.css
/images/foo.png

If screen.css wants to use foo.png as a background image, it would be referenced like so:

.foo {
    background: url(../images/foo.png);
}

When you use relative URLs, you can't go around shuffling your CSS files without modifying the paths in those files.

It sounds like you are in need of a test environment where the structure of your assets is identical to that of your live site. Such an environment could be created by setting up a web server on your desktop machine (I personally use a virtual machine running unix on my desktop for my web server), but that is beyond the scope of this question. Setting up symbolic links to your assets in your "test" directory could also work.

于 2013-02-19T20:23:41.637 回答