So let's say the stylesheet contains the following:

#nav-bg { background: url(/images/my-image.png); }

How do I make this path work on my staging server as well as my production server? The difference being that my staging server hosts multiple pre-production websites in different directories under one domain, whereas the root directory in my production site is always "/" so a site-root relative path doesn't work. Any ideas or suggestions on how to achieve this?

This question could possibly bleed over into realms of web development not intended to be addressed in this forum, but I'd love to hear any ideas involving solutions provided by Linux, IIS 6, C#, ASP.NET, Django or Python.

Thanks for all of your advice and support

5 answers

5
points
This was chosen as the best answer

Can you give some more information about this? Every site I complete is also run locally on my machine for development and testing, and I've never had a problem, so I'm not sure I understand the issue you've encountered. When my sites are uploaded, the root directory is '/', and I put my CSS in a folder called 'CSS' and my images in a folder imaginably named 'images', and my CSS file inside the CSS folder would look something like this:

body { background: url(../images/my-image.png); } // Go up a level out of the CSS folder, and then into the images folder

By placing the same files and folders in a local folder, i.e. 'website', this folder acts as the root directory, so the paths are still correct. I may be missing the point, and if so please explain more so I, or someone else, can help.

Answered about 10 years ago by Edward Williams
  • I think Edward's solution might be exactly what you need. Let us know if this works. Why didn't I think of this! Paul Farnell about 10 years ago
  • Edward, thanks so much for the input, but the directory-relative paths won't work my scenario. Relative paths in an external stylesheet are problematic for my situation because I'm working in an environment where directories are nested n levels deep due t Michaux Kelley about 10 years ago
  • I'm currently working on a handler that intercepts the request and maps the path site-root relative based on the name returned from the application's root directory, which as it turns out is "staging/" instead of "/". I will keep you guys updated as I pro Michaux Kelley about 10 years ago
  • Michaux, you're welcome, and I'm sorry if I'm missing the point, but wouldn't this work if you removed the forward slash from the start of the image's path, like Cameron said. It would then work in a similar way to my original post but without the CSS sub Edward Williams about 10 years ago
  • Oh my. I've been doing a "very bad thing" for years, competely lacking in understanding how CSS background-images are processed. I assumed that the background images were relative to the page and not the external css file. So I confess my crime and apologize for the confusion. You didn't miss the point. I did. Thank you. Michaux Kelley about 10 years ago
2
points

Whilst this doesn't solve your problem immediately, I used to run into the same issue myself.

I changed to using different subdomains to access the various sites on my development server. That way the references to images and other assets could be the same across development and production.

Answered about 10 years ago by Paul Farnell
  • I think that's a great and reasonable solution, and just might be the "best answer", but unfortunately I'm not in charge of the directory structure so I'll have to resort to something quite possibly unreasonable and hackish. Thanks again. Michaux Kelley about 10 years ago
2
points

I may be missing the problem here, but can't you just do

#nav-bg { background: url(images/my-image.png); }

? It'd pull the image from the location of the css file. Such as, if your css file is at domain.com/style.css, and you did that, even if you were in domain.com/directory/index.html, it'd pull it from domain.com/images/bkg.png.

Therefore, even on your staging server (staging.com/domain/style.css) it would work. By not having the first /, it looks not at domain.com/images, but wherever the css file is /images.

Make sense? Or am I just misunderstanding the question?

Answered about 10 years ago by Cameron Conner
  • This would be the most correct method. I usually have an "img" folder in the same directory as the css file(s) and reference images as url("img/example.png") with images being referenced to usually being solely style related. This keeps the "css" folder a lot more portable. Marcel T about 10 years ago
  • Yes. See my apology for ignorance above. Thanks again. Michaux Kelley about 10 years ago
0
points

In addition to relative URLs or making the staging server match the development server's structure, would <base> (or the equivalent header or <meta> methods) work? This would then give you one part to change, and if done in the header wouldn't even require changes to your code. Unfortunately I don't know if this would work, or how it would interact with CSS files, as relative URLs in CSS are relative to the CSS file, not the HTML file.

Another alternative method you could explore if you're using a CMS is Apache variables. Again I don't know if this would work, but here's an article I wrote about abstracting config paths for ExpressionEngine to accommodate localhost and live server setup differences. Hopefully that'll give you somewhere to start from?

It's a tricky problem - the staging server setup should mirror the live server setup, but saying it doesn't make it reality huh :/

HTH

Answered about 10 years ago by Oli Studholme
0
points

In cases like Yours I keep background images in the same folder with the CSS file. Works.

Answered about 10 years ago by Thomas Traub