HTML和CSS文件中的URL路径

Question

Maybe title of this question is a little bit confusing to you but i will explain in detail.

Imagine you are developing a site (PHP SCRIPT) which has images, js files and background image urls in css. You need to make it work if user who purchased it put it in subfolder like:

www.example.com/subfolder

or when he put it in www.example.com

If I use path for background image in my CSS like this:

background: url(/assets/img/thumbs-up.png) no-repeat;

This will work if user place script in www.example.com but if he places in www.example.com/subfolder , browser will be requesting www.example.com/assets/img/thumbs-up.png instead of www.example.com/subfolder/assets/img/thumbs-up.png

This is usually solved using this

background: url(assets/img/thumbs-up.png) no-repeat;

But no, in my case the browser is requesting this url instead

http://www.example.com/subfolder/assets/css/assets/img/thumbs-up.png

This part, assets/css is where CSS file is located.

I fixed this by using

background: url(../../assets/img/thumbs-up.png) no-repeat;

This works in root www.example.com and www.example.com/subfolder But is it a good practice?

For JS files, I include script like this

<script src="assets/js/single_load.js"></script>

This works because file having this code is located in root of the script. ( http://www.example.com/index.php or http://www.example.com/subfolder/index.php is calling it, if a file in subfolder called JS i think I would have to add ../ many times depending in how many subfolders file is located)

Any thoughts, guides on this?

Answer 1

Use one path for your CSS file in all PHP scripts.

The path to image will be located from your CSS path, not PHP

For example:

- index.php
- subfolder
    --index.php
-assets
    --css
        ---style.css
    --img

style.css

background: url(../assets/img/thumbs-up.png) no-repeat;

config.php

<?php
$root_path = "www.example.com";
//OR $_SERVER["REQUEST_URI"]; if you have one index.php

root index.php

<?php include "config.php"; ?>
<link href="<?php echo $root_path;?>/assets/css/style.css">

subfolder/index.php

<?php include "config.php"; ?>
<link href="<?php echo $root_path;?>/assets/css/style.css">