Using relative URL in CSS file, what location is it relative to?
According to W3:
Partial URLs are interpreted relative to the source of the style sheet, not relative to the document
Therefore, in answer to your question, it will be relative to /stylesheets/
.
If you think about this, this makes sense, since the CSS file could be added to pages in different directories, so standardising it to the CSS file means that the URLs will work wherever the stylesheets are linked.
background-image relative url doesnt work in CSS stylesheet
url()
in CSS is relative to the location of your CSS file.
If I understand you correctly, this is your folder structure:
-+-img
| +--images
+html_file
+css_file
If so, try this:
#Philippines {
background-image:url("img/UK.png");
}
How to use relative/absolute paths in css URLs?
The URL is relative to the location of the CSS file, so this should work for you:
url('../../images/image.jpg')
The relative URL goes two folders back, and then to the images
folder - it should work for both cases, as long as the structure is the same.
From https://www.w3.org/TR/CSS1/#url:
Partial URLs are interpreted relative to the source of the style sheet, not relative to the document
Solution to relative path to image in CSS file depending on what file that includes it
The only way is with absolute paths. This means that in your CSS you must define an absolute path for your images, for example:
background-image: url(/images/image.png);
What's the problem? You need to know the absolute path where your folders are. For example, if you have this URL: http://localhost/myFolder/images/image.png
, your CSS will be:
background-image: url(/myFolder/images/image.png);
But when you upload it to a production server like this: http://myserver.com/images/image.png
, your CSS must to change to something like this:
background-image: url(/images/image.png);
So the best way is to develop in the same environment that your production server. This will be with the URL http://localhost/images/image.png
(develop) and http://myserver.com/images/image.png
(production).
Another way is to making friendly URLs, that avoids to you to make custom folders, and you can have all in one folder and the URLs will be rewrited by the server.
Good luck.
Absolute vs relative URLs
In general, it is considered best-practice to use relative URLs, so that your website will not be bound to the base URL of where it is currently deployed. For example, it will be able to work on localhost, as well as on your public domain, without modifications.
Is a relative path in a CSS file relative to the CSS file?
Yes, it's relative to the .css
Here's an example layout:
Page: page.htm ... does not matter where
CSS: /resources/css/styles.css
Image: /resources/images/image.jpg
CSS in styles.css
:
div { background-image: url('../images/image.jpg');
Related Topics
Fixed Headers on Scroll Inst Working Correctly in Angular Application
How to Get an Iframe to Be Responsive in iOS Safari
Displaying Comma Separated String in Angular 6
How to Modify the Primeng P-Calendar Style
How to Rotate the Block Every Time You Click on the Button
How to Toggle Mat-Expansion-Panel With Button Click
Best Way to Create Video from Html5 Animation
Large File Upload Though HTML Form (More Than 2 Gb)
Bootstrap Accordion Issue With Arrow
How to Automatically Set Text Box to Uppercase
Children Not Staying Inside Parent Divs
Stretch and Scale CSS Background
How to Make an Image Center (Vertically & Horizontally) Inside a Bigger Div
How to Select the Last Element With a Specific Class, Not Last Child Inside of Parent