creating html pages in eclipse
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">
加载中,请稍侯......
精彩评论