0

I'm aware CSS relative paths while referencing images are relative to the CSS file itself. I want to reference an image in the HTML file folder, so that though the image will always have the same name, there will be a different image fore each directory visited.

I have a directory structure similar to this:

book/
-index.html
-style.css
-chapter1/
--background.png
--index.html
-chapter2/
--index.html
--background.png

I want the style.css to reference the background.png image of each index.html as the background.png that is in the same directory of the relevant index.html.

Is that possible? If so, how can I do it.

Improve this question
4
  • 2
    No, I don’t think that is possible. You could use an inline style though – that would be relative to the path of the HTML document. Commented Mar 29, 2015 at 0:51
  • Yes. That is the solution I am using now, but I wish there was a cleaner way. Commented Mar 29, 2015 at 1:06
  • I literally misunderstood the question and thought why in this world would css file would not include image like '../chapter1/background.png'. Btw this is more of a poor design decision of your website/application rather than css and you can probably correct it. Commented Mar 29, 2015 at 9:58
  • I disagree that this is a poor design decision. Why would that be case? It is a static website. Each page is a folder. All pages have some divs that have some backgrounds. The background changes for each page. The name of the background is always the same. The background must be referenced by each page as "background.png". I'd simply like this reference to be made in style.css Commented May 9, 2015 at 12:50

1 Answer 1

Reset to default
2

This is not possible in an external style sheet. Image urls are relative to the style sheet url, not the document url.

You can solve this by adding the CSS to the document itself. You don't need the entire CSS in the document, but you could just add the background image in the document:

<style>.yourclass{ background-image: url('background.png'); }</style>

It's not great, but I think it's the best solution at this moment.

Alternatively, you can specify the backgrounds for all documents in the css and add a class to the document. For instance, you can add the document title as a class to the body, and base your style on that, so you would get something like

body.chapter-1 .yourclass{ background-image: url('../chapter1/background.png'); }

The disadvantage, of course, is that you would have to know the documents and add each one to the style sheet. So it depends on your situation which one works best. If you want your chapters to choose from a select number of styles, adding a class would be the best option. If each document should have its own background, I think embedding it in the document itself would be the best option, otherwise your stylesheet will contain your complete website index and has to be changed every time you add new content.

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

6 Comments

Sometimes I have a hard time writing plain HTML and CSS. I think some standards were built without taking into account that these are still markup languages and may be written manually... Thank you for the answer. At least I'll stop wasting time with a frustrating search.
“I think some standards were built without taking into account that these are still markup languages and may be written manually...” – on the contrary, I think they were written especially with that in mind. Don’t get fooled by the fact that here they don’t work in your favor for your rather special use case – normally, in a project with HTML files at different path depths and just one central stylesheet, […]
[…] the fact that references inside the stylesheet are relative to the stylesheet is absolutely what one would want – otherwise, a common background image that you want to use in all of those documents would have to be placed inside each and every folder, and that would not make any sense at all.
The workaround for my special use case is to use a style inside each document. This is not really a good idea. I never meant that the default should be this use case, but that there should be a way to avoid so much repetition.
OK, they may have had that purpose, but I am not convinced this is such a special use case. The problem is quite simple. I can see but three possible ways to reference: root, relative to stylesheet and relative to document. Is it really so implausible an option as to be ruled out? The workaround for my special use case is to use a style inside each document. This is not really a good idea and imposes a great deal of unnecessary work, pushing the developer to a script solution to a static document. [...]
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.