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
  • 190 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Dandello

Dani AI

Generated

Short version: the image is escaping because an absolutely positioned element looks for the nearest positioned ancestor. As pointed out, if the parent DIV has the default static position the absolutely positioned image will be placed relative to the page, not the DIV. Making the DIV itself positioned creates the correct containing block—but there are cleaner options than forcing the parent to be absolutely positioned.

A simple, robust approach is to make the image a CSS background on the box (best for decorative images). Backgrounds stay inside the element, scale predictably and don’t need z-index juggling:

<div class="panel">
  <h2>Hello world</h2>
  <p>Pakistan</p>
</div>

<style>
.panel {
  width:200px;
  height:200px;
  padding:10px;
  box-sizing:border-box;
  background-image: url("dream.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
</style>

If the image is content (not purely decorative) and you must use an <img>, create a positioned container and let the image fill it. This avoids negative z-index issues and keeps content accessible:

<div class="wrap">
  <img class="bgimg" src="dream.jpg" alt="" />
  <h2>Hello world</h2>
</div>

<style>
.wrap { position: relative; width:200px; height:200px; overflow:hidden; }
.bgimg {
  position: absolute;
  inset: 0;
  width:100%;
  height:100%;
  object-fit: cover;
  z-index: 0;
}
.wrap > h2 { position: relative; z-index: 1; margin:0; }
</style>

Troubleshooting tips: avoid z-index: -1 (it can hide the image behind parent backgrounds), prefer z-index:0/1; set position: relative on the parent instead of making the parent absolutely positioned unless you need it for layout; use object-fit or background-size: cover to preserve aspect ratio; and as noted, overflow:hidden can be used to clip overflow when needed.

Recommended Answers

All 9 Replies

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.