Can not display images by CSS

**thientanchuong** · 06-22-2010, 12:24 PM

I use css to code my web layout and I also can view all images on Dreamweaver.

However, when I view my web layout on Browsers( Firefox, IE), nothing appears.

My code for HTML is:

Code:

<html>
<head>
<title>Hung</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="/template/style.css">
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="menu"></div>
<div id="whitebody">

</div>
<div id="footer"></div>
</div>
</body>
</html>

And MY CSS CODE is:

Code:

body{
color:#FFF;
margin: 0px;
padding:0px;
}

#container{
background-position:center;
}
#header{
background:url(/template/images/header.gif);
background-repeat: no-repeat;
width: 800px;
height: 80px;
}

#menu{
background-image:url(/template/images/menu.gif);
background-repeat:no-repeat;
width: 800px;
height: 55px;
}

#whitebody{
background-image:url(/template/images/backgroundbdoy.gif);
background-repeat:no-repeat;
width: 800px;
height: 441px;
}

#footer{
background-image:url(/template/images/footer.gif);
background-repeat:no-repeat;
width: 800px;
height: 24px;
}

If the paths of images are wrong, I can not view on Dreamweaver but I can.

What wrong have I done ? please let me know and possibly give me a solution as you can.

Thank you very much.

**azoomer** · 06-22-2010, 02:47 PM

Did you try to remove the slash / like this:
background:url(template/images/header.gif);

**thientanchuong** · 06-22-2010, 02:54 PM

Yes, I did, but no image appears

**azoomer** · 06-22-2010, 03:09 PM

I see you are on wamp. When you open the file on localhost, have you tried to view the souorce code ? I just wonder if there is any html markup on the page now if you rightclick an press: view page source

**auntnini** · 06-22-2010, 08:22 PM

What is "wamp"?

In basic HTML, if you are in a sub-folder and want to access another folder, you use 2 dots before the slash "to dig yourself out of the sub-folder" -- so it would be

Code:

 ../images/footer.gif

I imagine this would be true with "wamp" (whatever that is).

**azoomer** · 06-22-2010, 09:20 PM

auntnini ! Wamp is a server that you can install locally on your pc. It has apache, php and mySQL modules. It's very useful for running php without having to upload to a server online. Also you can run installations like wordpress and drupal on it. There is en equivalent server called Xamp and also one called Mamp for mac. My question was aimed at finding out if his server setup is working.

Thread: Can not display images by CSS

Thread Tools

Search Thread

Can not display images by CSS

Wamp???

The Following User Says Thank You to azoomer For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions