Member Avatar for RJ_Dev

Hi All,

Well this is a simple problem, I'm developing websites for a client and I send them the html/css files with the regular url's in css like this -
#body {background-image: url(Images/bg.jpg);}

but they send me back the css file which has a Forward Slash '/' in the beginning of every url like this - #body {background-image: url(/Images/bg.jpg); }. This results in the images not appearing in my browser, I don't want to remove the forward slash from the entire css code because I've to send this css file back to the clients, so I'm trying to find a solution where such files will appear properly even while viewing locally.

Thanks Guys.

  • 2 Contributors
  • 1 Reply
  • 129 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by Kraai

Dani AI

Generated

Short, practical notes that build on @KJ_Dev and : the client’s change to leading‑slash paths makes those URLs root‑relative on a web server. Opening the files directly from disk does not give the same server root, so the browser requests go to the wrong place and the assets fail to load. Moving files around can mask the problem, but a more robust and repeatable approach is to serve the site locally while developing.

Quick, reliable fix — run a local web server from your project root. From a terminal in the project folder:

python -m http.server 8000

Then open the pages at . Root‑relative paths will resolve against that server root. Alternatives: php -S localhost:8000 or a simple Node/npm static server if preferred.

Other options and gotchas: convert paths locally to be relative to the stylesheet (or use a dev-only rewrite step), or create a local vhost that matches the client’s domain (edit hosts and configure your webserver) so the same root paths work. Note that relative URLs inside external CSS are resolved relative to the stylesheet file (not the HTML <base>), so adding a <base> tag in the HTML won’t fix leading‑slash URLs inside an external stylesheet — see the docs below. Use the browser Network panel to inspect the exact request path and adjust accordingly.

References: MDN: CSS url(), MDN: HTML <base> element, Python http.server docs.

Member Avatar for Kraai

The solution is easy, but let me explain something first:

the url path is where the actual image lies, on your machine, or on their machine, or on the remote server. If you have a folder on your machine with the css and all files related to the website inside that folder, and you can see the images with: url(Images/bg.jpg);} it means that inside your folder, you have another folder called "Images" where the bg.jpg is situated, and this tells your browser where to go and look for it.

Now, when you get the files back, they changed your url to where they have the images stored on their machine or server, so they can see the images as well. the forward slash in the beginning of the path means there is another directory before the directory that they use to store the script in.

To resolve, create another folder, and put everything as is inside that folder, and see if this solved your problem.

commented: like to see people explain +3
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.