CODEWITHSUNDEEP
htmlcssfilepath
Anonymous
Anonymous

Reputation: 4630

css stylesheet path, stick to where the file itself is located?

I've got a css file in a root folder, and it refers to the files inside, relative to its path.

For example stylesheet.css along with image.png in one folder, summoned as follows:

background-image:url('image.png');

When I attach it to the index.html as following:

<LINK rel="stylesheet" type="text/css" href="stylesheet.css">

... it loads just fine, but if want to attach it to a subfolders' file:

<LINK rel="stylesheet" type="text/css" href="../template_style.css">

... the template loads, but it actually looks for the image.png in the folder of the html file it is launched from, and not from the folder of the css file itself.

Is there any fix for this?

Upvotes: 0

Views: 10700

Answers (3)

Jack
Jack

Reputation: 1472

<link rel="stylesheet" type="text/css" href="../(supposed to be subfolders name)/template_style.css">

and for the same image if both in same folder, make sure css and image both in same folder or same place.

background-image:url("../image.png");

and it would be grate if you make a seperate image folder.

background-image:url("../folder name/image.png");

Upvotes: 1

Gabriel Santos
Gabriel Santos

Reputation: 4974

Add <base href="http://www.example.com/"> to your head

With this, all you need is add:

<link rel="stylesheet" type="text/css" href="stylesheet.css">

If is a domain or subdomain, the href need to be stylesheet.css if your css are inside public root folder (http://www.example.com/stylesheet.css)

Upvotes: 2

dtbarne
dtbarne

Reputation: 8210

CSS relative paths are relative to the CSS file itself, not the page that loaded the CSS file.

I typically put my CSS files in /css and the images for CSS in /css/images. Then you can put your images relatively like:

background-image:url('images/image.png');

Upvotes: 1

Related Questions