How to deal with paths in CSS when including the same css file from multiple directories

Question

I have the following folder structure

website 
    \styles\ 
         main.css
    \directory\
         page.php  
    \layout\ 
         background.jpg 
         common_includes.php 
    index.php

main.css contains background-image such as

 #container  {
    background-image: url('../layout/background.jpg'); 
 }

common_includes.php contains CSS and JS files which are common to all pages.Eg:

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

index.php

  <?php include_once '/layout/common_includes.php'; ?>

Everything perfect until here.

Now I want to have a folder with other pages (/directory/page.php).

I want page.php to use the same common_includes.php.

Obviously by doing:

  <?php include_once '../layout/common_includes.php'; ?>

doesn't work due to a different Working Directory.

I tried duplicating common_includes.php to have correct paths:

common_includes_directory.php

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

THen I got into the problem that the background.jpg in the CSS cannot be found.

How can I achieve this without having to duplicate everything?

Community · Accepted Answer · 2017-05-23 12:23:50Z

1

Use absolute path(relative to root)

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

In css use

#container  {
    background-image: url('/layout/background.jpg'); 
 }

Any path which starts with "/" is relative to root and it remains same wherever you use it. For more details read Having links relative to root?

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Mar 12, 2016 at 11:59

Rehan Haider

1,06112 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rehan Haider Over a year ago

open page in chrome then open console to check which link is not working. It may have 404 error. inspect it and show results so I could help you accordingly.

Collectives™ on Stack Overflow

How to deal with paths in CSS when including the same css file from multiple directories

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related