CODEWITHSUNDEEP
css
thomas1988
thomas1988

Reputation: 55

Making URL in stylesheet relative to current location rather than location of stylesheet

I've been building my page with CSS at the top of every page, but as a lot of the styles I'm using are repeated throughout the site, I figured it would be easier (and a lot tidier) to create a global stylesheet.

Whilst the transition has been fairly smooth, I've encountered an issue with URLs in the stylesheet being relative to the location of the stylesheet rather than the active page.

My current file structure structure looks a little something like this

/products/productN/

and in each folder there are a selection of images related to each product which are used as background images. I'd previously just been using

background-img: url ("header.jpg");

but having a global stylesheet now causes the site to look for the image as below

/folderinwhichstylesheetissaved/header.jpg

Due to the file structure of the site, using . or ./ is not an option, so I was wondering if there is a way to direct the stylesheet to the current location (without creating a dynamic stylesheet) or whether would it be simpler to just move the effective styles back to the product template page?

Upvotes: 0

Views: 60

Answers (1)

Nightray
Nightray

Reputation: 93

It is technically possible with <base> tag as it overrides the base URL of the page. It isn't, however, recommended as it overrides everything, not just CSS. If you choose to do that, you must remember that all relative paths on that page will start from the provided URL and with larger projects that would be a nightmare to maintain.

Upvotes: 1

Related Questions