0

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>

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

I want to result shown in attached file.

Please help

Attachments aaa.JPG 5.8 KB
3
Contributors
9
Replies
10
Views
6 Years
Discussion Span
Last Post by Dandello
0

Sir,

The parent container is DIV
I want to show image and text in it.

0

No - when you set a position:absolute, that item is taken out of the normal flow - unless it's inside container with a stated position attribute (position:absolute, position:relative, position: static, position:fixed. If that container doe not have a stated position, then the body becomes the parent.

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

by the way you are doing wrong..
check this out for reference on what you need to do http://www.cssplay.co.uk/layouts/background.html

best regards

Edited by Nick Evan: Fixed formatting

0

these code work fine for me

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

All I did was repeat some of your own code because it was exactly those snippets you were having an issue with.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.