Wrong image location in div [Archive]

tqmd1

11-09-2011, 07:34 AM

Dear Sir,

I have following codes

<html> <style type="text/css"> #d1 {float:left; width:200px;height:200px; background-color:e3eeff; margin:20px 20px 20px 20px; padding:20px 20px 20px 20px; text-align:center; vertical-align:middle; letter-spacing:10pt;} .bg {width:100%;height:100%;position:absolute;z-index:-1;} </style> <body> <div id="d1"><img class="bg" src="dream.jpg" width=100 height=100%><h2>Hello world</h2></div> </body> </html><html>

<style type="text/css">

#d1 {float:left;
width:200px;height:200px;
background-color:e3eeff;
margin:20px 20px 20px 20px;
padding:20px 20px 20px 20px;
text-align:center;
vertical-align:middle;
letter-spacing:10pt;}

.bg {width:100%;height:100%;position:absolute;z-index:-1;}

</style>

<body>

<div id="d1"><img class="bg" src="dream.jpg" width=100 height=100%><h2>Hello world</h2></div>

</body>

</html>

I want to know
Why background image goes outside of div?

I want result shown in attached file

Please help

Excavator

11-09-2011, 09:03 AM

Hello tqmd1,
Both those examples have several errors the validator can help you find. See the links in my signature line about validation.

Try it like this once - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#d1 {
height: 200px;
width: 200px;
float: left;
margin: 20px;
padding: 20px;
background: #e3eeff url(http://www.codingforums.com/attachment.php?attachmentid=10470&d=1320824327);
text-align: center;
}
</style>
</head>
<body>
<div id="d1">
<h2>some text</h2>
</div>
</body>
</html>