How to correctly plug CSS into HTML with absolute path to make picture from CSS working?
Question
It might sound silly, but I am trying to understand this.
When I plugged CSS with absolute path - picture/fonts are not loading (404).
I test a page on the built-in WebStorm server (2022.3) through Chrome browser.
[i just heard absolute paths are better, that is why]
What did I miss?
Here is an example:
file structure
css-pract[root]/
-folder/
--css/
---styles.css
--img/
---some.jpg
-index.html
index.html
<!doctype html>
<html lang="ru">
<head>
<link rel="stylesheet" href="/folder/css/styles.css">
</head>
<body>
<div class="has-bg"></div>
</body>
</html>
styles.css
.has-bg {
background: url("/folder/img/some.jpg");
}
It works when I do relative: <link rel="stylesheet" href="css/styles.css">
Also, the <img> from index.html are loaded with absolute paths, so I was expecting it to work from css also.
3 answers
solution1
0 2023-01-04 20:01:02
Actually /folder/css/styles.css also is kinda a relative path. If you are using Windows, some full absolute path should be something like: C:/Folder/image.jpg .
You're doing this just for studies purpose? If yes, I don't think you need to be worry about this.
If you're gonna deploy it in some server, then you gonna have a full absolute path looking something like: https://website.com/images/image.jpg and then you can correctly use the absolute path as something like BASE_PATH/image/image.jpg where BASE_PATH is some variable with the full website link.
solution2
0 2023-01-04 20:32:23
Another approach is to set the base in the <head> of your html like this
<base href="https://www.example.com/">
Then all relative url's in your page will be preceded with this url.
folder/img/some.jpg
will become
https://www.example.com/folder/img/some.jpg
solution3
0 ACCPTED 2023-01-05 10:19:19
I've tied to replicate your folder structure and both relative and absolute paths worked for me.
You need to give the div with class "has-bg" a height, however, in order to see the background image. Perhaps you forgot to do this for the absolute paths?
Relative paths
in index.html:
<link rel="stylesheet" href="./folder/css/styles.css" />
in styles.css:
background: url("../img/some.jpg");
Absolute paths
in index.html:
<link rel="stylesheet" href="/folder/css/styles.css" />
in styles.css:
background: url("/folder/img/some.jpg");
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.