CODEWITHSUNDEEP
htmlcsscenter
Sapp
Sapp

Reputation: 1803

Overlapping images in CSS with divs

enter image description here

I have 2 images I would like to look similar to this photo (sorry about the quality, the PSD for the site is scattered so I whipped an image together in a few mins to show what I meant).

My first image is the logo - which is a png of the guy with glasses, the trail and the title.

The second image is the blue box, which I would like to be a form for users to put their email address on.

My HTML tags are this:

<body id="home">
    <div id="main" method="post" action="">
    <img id="Smarty" src="images/logo.png" />

</div>

       <div id="box" method="post" action="">
       <img id="Form" src="images/form.png" />

</div>

And my css follows:

 #home #main {
margin-top: 10%;
margin-right: auto;
margin-left: auto; }

 #home #main #box {

margin-right: auto;
margin-left: auto; }

The goal is to have the image looking like the attached photo, with it all centered relative to the size of the users screen. I already have the background working to scale accordingly, but cannot for the life of me figure out how to overlap existing PNGs in CSS with % values rather than fixed pixel values.

Thanks for any guidance!

EDIT:

This code puts my logo in the right place (center and 8% down from the top of the page):

  #wrapper #main {

margin-top: 8%;
margin-right: auto;
margin-left: auto;
text-align:center; 
display:block; }


  #wrapper #main #box{

margin-top: 8%;
margin-right: auto;
margin-left: auto;
position: relative;
text-align:center;
display:block; }

But the box is still below the logo, and to the far left.

Upvotes: 0

Views: 11815

Answers (3)

Michas
Michas

Reputation: 9428

Why don't You use these images as backgrounds?

Small example.

HTML:

<div id="smarty">
    <div id="form">
        <!-- The content -->
    </div>
</div>

CSS:

#smarty {
    background-image: url('images/logo.png');
}

#form {
    background-image: url('images/form.png');
}

P.S.

IE6 hate png with alpha.

Upvotes: 3

sandeep
sandeep

Reputation: 92803

you can use multiple images in single div with overlapping. it's easy way for overlapping multiple images

#box{
  background: url (bg1.png) no-repeat top left,url (bg2.png) no-repeat top center,url (bg3.png) no-repeat top center;
}

Upvotes: 0

Naftali
Naftali

Reputation: 146302

try adding position relative to one of the divs or use float (right and left) 

#home #main {
margin-top: 10%;
margin-right: auto;
margin-left: auto; }

 #home #main #box {

margin-right: auto;
margin-left: auto; 

position: relative;}

Upvotes: 1

Related Questions