CODEWITHSUNDEEP
htmlcsseclipse
user710502
user710502

Reputation: 11471

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 :)

Upvotes: 1

Views: 7545

Answers (5)

Eddy
Eddy

Reputation: 3703

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">

Upvotes: 0

Laura Liparulo
Laura Liparulo

Reputation: 2897

This works:

    <img src="../images/picture.png" width="40%"/>

when you have:
WebContent/ and in the subdirectories:
html/index.html
images/picture.png

Upvotes: 0

attack
attack

Reputation: 1523

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.

Upvotes: 6

JiminP
JiminP

Reputation: 2142

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.

Upvotes: 4

Arnout Engelen
Arnout Engelen

Reputation: 6897

You're using absolute paths (paths starting with a '/'). Using relative paths might help.

Upvotes: 1

Related Questions