Actually i have 2 jpg images one is rectangle box which fits the width of the screen and height is small enough to appear like blue color menu bar at the top and bottam of this site and the second page contains a home button and in my site i want this button should appear on the top of rectangle box.can any one help me to solve this problem???

Recommended Answers

All 5 Replies

What have you tried? Where is your site or code?

Couldn't get your problem, but from your title "how to insert image on a image
" I can give you a hint to give the "absolute" position to the image you want to place over the second image.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" 

/>

</head>
<style type="text/css">
#box1{
	margin:30px auto;
	width:200px;
	height:200px;
	background:orange;
	}

#box2{float:left;
	width:100px;
	height:100px;
	margin-left:50px;
	margin-top:50px;
	background:#e3eeff;
	}
</style>
</head>

<body>

<div id="box1">
<div id="box2">
</div></div>


</body>
</html>

Replace background with
background-image=url(your file name);

You will see image on image.

i attached the images i have and i want home image to be over load i followed above code but the problem with that is white space in image is occupiying the load image remaining part.

Make the background of the top image (Home button) transparent. You will need to convert it to png or gif since jpg does not support transparency.

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.