Image on Image

Question

Farhad.idrees 1 Junior Poster in Training

13 Years Ago

I m having Problem
i want to put green image on black image...
my css code is..

@charset "utf-8";
/* CSS Document */

#Container
{
	background-image:url(../Layers/Container.jpg);
	width:1024px;
	height:768px;
	background-repeat:no-repeat;
	
}

#MiniContainer
{
	background-image:url(../Layers/MiniContainer.jpg);
	background-repeat:no-repeat;
	/*margin:150px 10px 100px 150px;*/
	margin-top:100;
	margin-left:50px;
	margin-bottom:100px;
	margin-right:50px;
}

and my html code is

<!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=utf-8" />
<title>Untitled Document</title>
<link href="Style.css" type="text/css" rel="stylesheet" />
</head>

<body>
<center>
<div id="Container">

<div id="MiniContainer">
<img src="../Layers/MiniContainer.jpg" width="873"  height="452"/>
</div>

</div>
</center>
</body>
</html>

i m trying to fix it since 2 hours but not able to do it kindly help me..i have attached picture as i want to do it..

image web-design

2 Contributors
1 Reply
144 Views
9 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by Arkinder

Reply to this topic

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.

Arkinder 93 Posting Pro in Training · Answer 1 · 2011-07-31T06:14:41+00:00

First you need use a strict doctype. Using anything but on any new page is just lazy. Also, if you aren't parsing XML data, then you shouldn't be using XHTML syntax. To center the boxes you need to use margin: 0 auto; and make sure that both elements have a set width. You're using margin the wrong way.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
     
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type="text/css">
     
	    @charset "utf-8";
	    /* CSS Document */
				
            * { margin: 0; padding: 0;}
	    #Container 
            {
	        background-color: #000;
	        background-image: url('../Layers/Container.jpg');
                width: 1024px;
	        height: 768px;
	        margin: 0 auto;
	        padding-top: 24%;
	        background-repeat: no-repeat;
	    }

	    #MiniContainer 
            {
	        background-color: green;
		background-image: url('../Layers/MiniContainer.jpg');
		background-repeat: no-repeat;
		width: 85%;
	        height: 59%;
	        margin: 0 auto;
	    }
	 
         </style>
     </head>
     
     <body>
     <div id="Container">

     <div id="MiniContainer">
         <img alt="" src="../Layers/MiniContainer.jpg">
     </div>

     </div>
     </body>
     
</html>

Regards
Arkinder