Member Avatar for tqmd1

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

aaa.JPG 5.8 KB
  • 3 Contributors
  • 9 Replies
  • 132 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Dandello
Member Avatar for Dandello

You're showing us what you want but not what you've got. BUT, the

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

is doing it. There's no position attribute in the #d1 so the absolute positioning in .bg will put .bg up in a corner of the browser window - which is its actual parent container.
see: http://www.barelyfitz.com/screencast/html-training/css/positioning/

Edited by Dandello because: n/a
Member Avatar for tqmd1

Sir,

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

Member Avatar for Dandello

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.

Member Avatar for migcosta 
#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 because: Fixed formatting
Member Avatar for tqmd1

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>
Member Avatar for Dandello 
#d1	{position: absolute;
.bg {position:absolute;
Member Avatar for tqmd1

This also work fine in this style

Member Avatar for Dandello

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.