About Relative Paths for Web Resources

For HTML, the relative paths are relative to the directory of the HTML file:

1
2
<!-- /index.html -->
<img alt="" src="img/the-image.jpg" />

For JavaScripts, the relative paths are still relative to the directory of the HTML file:

1
2
3
/* /js/main.js */
var img = new Image();
img.src = 'img/the-image.jpg';

But for CSS, the relative paths are relative to the directory of the CSS file:

1
2
3
4
/* /css/main.css */
body {
    background: url(../img/the-image.jpg);
}

Tips and Tricks Web Design JavaScript HTML5 CSS3 CSS2