I want to call a css from my index.html, and the css is in a CSS folder, also there is an image in a images folder..
I have tried different ways but no luck
The directory looks like this
My_First_Website
Javascript Resources
WebContent
css
mystyles.css
images
mybackgroundImage.png
index.html
Now mystyles.css looks like this
#CHARSET "ISO-8859-1";
body
{
background-image:url('/WebContent/images/mybackgroundimage.png');
}
And my HTML page looks this
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="/WebContent/css/mystyles.css" media="screen" />
<title>My Website</title>
</head>
<body>
</body>
</html>
Right now the page shows empty :(. Please help :)
In your background image and your stylesheet reference, you're using absolute paths (paths that begin with the forward slash). On a website, an absolute path instructs the browser to go looking for a resource at the root.
So let's imagine I have a website with the following structure:
index.html
css/
screen.css
images/
main-back.png
project/
sample.html
And I'm adding the following HTML to project/sample.html:
<img src="/images/main-back.png" />
To find the image, the browser will first go to the root directory, then look for the images directory, and then look for main-back.png. Alternatively, you can use relative paths:
<img src="images/main-back.png" />
Without the forward slash, the browser will start in the project directory (where sample.html is located) and look in vain for an images folder. This will result in no image displaying. To fix it, we tell the browser to first navigate up a directory:
<img src="../images/main-back.png" />
This is basically the same thing as our first example, except we're using a relative path instead of an absolute path.
Now, the problem you are facing is that you're opening the page up on your own computer. In this case, there is no root web directory, so you'll need to use relative paths instead of absolute paths. So, for your stylesheet reference, you can use:
<link rel="stylesheet" type="text/css" href="css/mystyles.css" media="screen" />
Start from index.html, look for the css directory in the same directory, and then find mystyles.css within that directory.
For your CSS image reference, the key thing to remember is that paths within CSS files are relative to the CSS file itself. So you'll need the following:
background-image:url('../images/mybackgroundimage.png');
Start from mystyles.css, move up a directory, look for the images directory, and then find mybackgroundimage.png in that directory.
Change /WebContent/css/mystyles.css in your HTML file to /css/mystyles.css, and change /WebContent/images/mybackgroundimage.png in your CSS file to ../images/mybackgroundimage.png.
/WebContent under WebContent means My_First_Website/WebContent/WebContent, not My_First_Website/WebContent.
You're using absolute paths (paths starting with a '/'). Using relative paths might help.
This works:
<img src="../images/picture.png" width="40%"/>
when you have:
WebContent/ and in the subdirectories:
html/index.html
images/picture.png
For me this worked:
.helpbg {
background-image:url('../resources/images/aboutbg.jpg');
}
And the element, which is in a JSF and Bootstrap project:
<div class="container-fluid helpbg">
Related
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.
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");
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.
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
This is the most silliest question but I dont know why I can't find the problem! Below is the code but css file is not loading.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
</head>
<body>
<section id="mainWrapper">
Hello
</section>
</body>
</html>
I checked the source in the browser, it cannot find the file specified! I tried to move file in the root and removed the folder name still the same. It is just the basic template that I was designing and I can't get CSS working!!!
Check the file name,sometimes when you rename via PC it tends to add layout.css.txt change the file name to just .css.
Move the file to the root where you have you HTML don't create any sub-folders for time being.
Please mention if your trying to upload to a server or just practicing,so we can give you precise instructions.
Try with full path
<link rel="stylesheet" type="text/css" href="http://domainname/css/layout.css" />
Also make sure file is accessible.
Another tip would be to check that the element ids that the CSS file is using are the same as those outlined in your index.html. If they are different the CSS will not be applied.
You can do it with specifying the path for it,
if you are using windows : go to your css file and click on properties where you will find the path for your css file, just copy and paste it in the below code.
Now confirm that with the path you have added the name of your file. Sometimes the relative paths are not working, you would need the full path. So, above is the procedure.
<link rel="stylesheet" type="text/css" href="add your full path here" />
Note: must see the name of file is included in the path you have copied if not do write it by your own.
I have following scenario.
I have Created a Web folder on my desktop which contains the html file Test.html and another folder styles which contains the myStyle.css file.
I am trying to link .css file with my html using the following code but it is not working.
How can i do this ?
Here is my Code :
<head>
<link href="Web/styles/myStyle.css" rel="stylesheet" type="text/css">
</head>
Test.html is inside the Web folder, so you don't have to enter the Web folder when you look relative to the HTML document.
You are trying to read $HOME\Desktop\Web\Web\styles\myStyle.css.
Remove the Web/ portion of the URI.
href="styles/myStyle.css"
You should also have a space between attributes.
rel="stylesheet" type="text/css"
Seems like your folder structure is something like this:
Web
|--styles
| |--myStyle.css
|--Test.html
If you reference the stylesheet from Test.html, you should specify the path relative to the location of Test.html. Specifying Web is not a good idea, because the directory that contains Test.html - which is Web - does not have a subdirectory called Web.
If the structure is the way I have shown above, the path should be styles/myStyle.css.
First of all you need to enclose My first WebPage in a title tag:
<title>My first WebPage</title>
Then what you need to do is specify the href attribute as a relative path, so assuming that your css is in a directory called styles the link would be:
<link href="styles/myStyle.css" rel="stylesheet" type="text/css">
Also, make sure there is a space between " and type in your link tag.
I hope this helps
I want to have a new folder containing a set of new html files. All the images inside it are in the format src="image.png" and image.png is located in the root folder. But when you put the HTML file in a new folder it can't find the image. You have to have it in the format src="../root folder/folder/image.png" to make it work. Which would mean a lot of pasting. I have tried putting image.png inside the folder but no change.
Use the <base> element. It allows you to specify a URL for all relative URLs in a page.
For example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>This is an example for the <base> element</title>
<base href="http://www.example.com/news/index.html">
</head>
<body>
<p>Visit the archives.</p>
</body>
</html>
The link in the this example would be a link to "http://www.example.com/news/archives.html".
For you, the base URL may be something as simple as <base href="http://www.yoursite.com/">. This would make images specificed as src="image.png" resolve as "http://www.yoursite.com/image.png"
See also https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
You need to set the base tag. If you add the tag in your page <head> like this:
<base href="http://yoursite.tld/folder/">
it should display images and with sources relative to this base path.
I am working on my website, and my HTML isn't linking to my CSS. Can somebody please shed some light on this issue?
This is the snippet from my code.
<link href="css/style2.css" rel="stylesheet" type="text/css">
My file directory goes like this.
/root
/css
style.css
style2.css
/html
index.html
webconfig.html
/Images
Is this correct?
Your current href is a relative path, rooted from where ever the HTML file is.
You can either use a correct, relative path...
<link href="../css/style2.css" rel="stylesheet" type="text/css">
Or you can use an absolute (domain-rooted) path...
<link href="/css/style2.css" rel="stylesheet" type="text/css">
... assuming your website is deployed at the root of your domain.
The link you have is relative, so it starts looking in the same folder as your html. You could do an absolute path to the css with /css/style2.css or use a relative path ../css/style2.css
Use relative URL <link href="../css/style2.css" rel="stylesheet" type="text/css">
The url css/style2.css should be relative to the HTML file(the file that contains code <link href="css/style2.css" rel="stylesheet" type="text/css">) .
.. in above relative URL indicates go one folder back, and then to the css folder - and in that css folder use style2.css file.
Similarly ../../ , means go two folders back and so on.