Relative link in CSS - html

I need help with one situation. I creat file structure :
MainFolder
index.html
IMGfolder
bg.jpg
CSSfolder
style.css
I need link picture bg.jpg relative url in my CSS style file :
background-color: url('?');
I try
/img/bg.jpg
../img/bg.jpg
but, it's not working. Thanks for help :)

Just add some lines of php in your html using getcwd() to be sure your relative path is correct.
BTW: In UNIX systems:
/ refers to the root directory
./ refers to the current directory
../ refers to the directory, in which the current directory is

Related

Why is my CSS file not linking to my HTML file?

Here is the path I am working with - /public_html/websystems/websystems.css
The HTML file I am trying to link is in the public_html directory and named index.html
The CSS file I am trying to link is in the websystems directory and named websystems.css
The contents of the files are shown in the images below.
HTML file
CSS file
Why are none of the styles I've set in my CSS file applying to my HTML file?
Thanks for your help.
Try this,
websystems/websystems.css
Note that, (taken from Quick Reminder About File Paths)
Is the image in the same directory as the file referencing it?
Is the image in a directory below?
Is the image in a directory above?
By "below" and "above", I mean subdirectories and parent directories.
Relative file paths give us a way to travel in both directions. Take a
look at my primitive example:
Here is all you need to know about relative file paths:
Starting with "/" returns to the root directory and starts there
Starting with "../" moves one directory backwards and starts there
Starting with "../../" moves two directories backwards and starts there (and so on...)
To move forward, just start with the first subdirectory and keep moving forward
Change the /websystems/websystems.css to just websystems/websystems.css and see if that works. That's a path relative to the current path of index.html.

path to fetch an image in another dir

I have my images in '/src/main/webapp/images' folder and my html code is in '/src/main/webapp/app/report' folder. How to specify the path to the image mentioned in that other directory?
I have tried:
<img src=".//src/main/webapp/images/pdf-file_128.png">
and also:
<img src="/src/main/webapp/images/pdf-file_128.png">
Note I am currently in webapp/app/report directory...
Thanks in advance!
Generally, you should be able to specify a Relative Path, using /../ to traverse up each directory level:
"../../images/image01.png"
Below are the relative path rules that you should know :
"/" returns to the root directory and starts path there
"../" moves one directory back and starts path there
"../../" moves two directories backward and starts path there (and so on...)
You need to go two level up to include the image in images folder as below :
<img src="../../images/pdf-file_128.png">
From your current directory, this should be the path to your image
../../images/your image name.png

Html root path isn't correct

I have a problem in my html pages
when I use "root-relative" paths it isn't make the path correctly
instead of direct to the folder of index.html it direct to the father folder.
Example:
My index.html is: Websites/MySite/index.html
when I make a link in index.html to "/" it direct me to Websites/
what is the problem?
Root is the first folder that your work begins. Your site root is actually Websites/. So it acts correct. Maybe some hosts consider the folder that your html file is on it as root. If you want to have no problem with this, you should make all relative links work with your main root.
There is a php function that gives your current html file path. You can use it before your links. like:
<?php php_function ?>/mylink
The root path is a setting in the server config. If you want to reach something relative to your index.html than you would use ./ and ../
You can go back with ../ and stay in the directory with ./ where the file you are using is in.
For example if you want to reach the file
Websites/someFile.txt
from your index.html in
Websites/MySite/index.html
you would have to use the relative path
../someFile.txt
and if you wanted to use the file
Websites/MySite/subDirectory/some.css
from the same index.html you would write
./subDirectory/some.css
I hope that helps, if not feel free to ask, or make you question more precise.
And if you want to read more about relative url's you can visit the mozilla develop network ("Going back in the directory tree")

Refencing a file in a parent directory

This probably a silly question but,
I have a project set up on my Desktop at:
~/Desktop/composer/
Inside this directory I have my folders:
css and templates
Inside my templates folder I have my index.html file, and I need to reference my css file in my css folder, but I can figure out how
I have tried:
/../css/style.css and /../../css/style.css, but neither of them work.
Thanks for your help.
You need to remove the leading /, since it denotes the root of your filesystem. Try ../css/style.css.

How to use a relative path to link to another local file?

This is a very basic html question, but I can't seem to locate the answer.
I have a local file located here:
/Users/Me/Desktop/Main/June/foo.txt
In an .html document located within the /Main directory, I can link to the foo.txt file using the full path:
Full Path Link
I would like to use relative paths to link to foo.txt. Does anyone know how to create a relative path link to this foo.txt file?
I tried the code below and a number of similar permutations, but I can't seem to successfully write the relative path link for this local file.
Relative path Link
Remove the file:/// part to have just ../June/foo.txt.
This should help you out.
If you simply drag your file from the solution explorer into the razor/html page, it will create for you everything you need.