Bg-Image & Positioning Not Working [Archive]

CSSman

10-15-2011, 07:53 AM

Hi all, there seems to be gremlins in my computer, one minute it renders my webpages correctly the next it stops working on the same pages altogether. I am trying to master using the Z-Index property but the computer is not cooperating. I have validated my html and css files but for some reason my page is not working if it is linked to an external css file whic is inside a folder. Background images of various elements do not show up but the background color of the entire page does. Positioning properties on external css are not working either. If I take the external css file out of its folder and put it in the same folder as the HTML page itself, it works fine. Below are my tags and CSS, please point out my mistakes, thanks in advance.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Css Positioning and Z-Index</title>
<link rel="stylesheet" type="text/css" media="screen" href="CSS/cssZindex.css">
<meta name="keywords" content="HTML,Practice, Practice,XML,CSS, coding, web design, web creation, website building" >
<meta name="robots" content="index,follow" >
<META name="Author" content="Me">
<meta name="Discription" content="Practice coding, web design, web creation, website building, HTML tags" >

</head>

<div id="Wrapper">


<div id="image1">
</div>

<div id="image2">
</div>

</div>
</body>
</html>

body{margin:0;
padding:0;
background-color:orange;
}

#Wrapper{margin:0;
padding:0;
width:800px;
height:600px;
}

#image1{border:0px;
background-image:url('Fotos/M1.png');
background-repeat:no-repeat;
width:100px;
height:100px;
position:absolute;
left:0px;
top:0px;
z-index:5;
}

#image2{border:0px;
background-image:url('Fotos/M2.png');
background-repeat:no-repeat;
width:100px;
height:100px;
position:absolute;
left:0px;
top:0px;
z-index:1;
}