centering and scaling set images in CSS - possible?

Hey all - I am trying to center 2 images on top of one another. It might be more prudent that I merge these 2 images together for the sake of 'ease of use' but right now I have 2 images - the text (logo.png) and the form (form.png). I would like them to look as such, aligned barely on top of one another - and have them centered on the screen hoping for them to scale and center according to screen size.

Is there an easy method for this that I am overlooking? Here are my images and CSS: (Sorry I don't have a live demo, as my sample is on a local server - but I can upload both if it might help).

The image is somewhat temporary - but the dimensions remain the same

 html{
    background: url(images/bg4.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-backgr开发者_运维知识库ound-size: cover;
    -o-background-size: cover;
     background-size: cover;
    }

 #main{
     width: 875px;
     height: 350px;
     background: url(images/form.png) 0 0 no-repeat;
     position: relative;
     margin: 15% 0 0 25%;
     z-index: 1;
    }

 #main form {
     width: 1014px;
     height: 228px;
     background: url(images/logo.png) 0 0 no-repeat;
     position: absolute;
     margin: -210px 0 0 -175px;
     z-index: 2;
    } 

With this code - I aim to center the images based on screen size, and have them scale accordingly. It works fine on my monitor but will go off-center on my smaller laptop.

Much thanks for any help!

(Also, there is no markup currently, I have this code in a <style type="text/css"> tag in my index.html file)

---

Here you go. I created the layout for you.

Check working example at http://jsfiddle.net/GeD32/

body{
    color:white;
}
.logo{
    background:black;
    width:100px;
    height:50px;
    clear:both;
}

.menu{
    position:relative;
    z-index:1;
    margin:40px auto 0px auto;
    background:gray;
    width:400px;
    height:50px;
    clear:both;
}

.form{
    position:relative;
    z-index:0;
    margin:-25px auto 0px auto;
    background:red;
     width:500px;
     height:250px;
     clear:both;
}

---

I'm sure you know already, but you can't count on CSS3 support, unless you happen to know all your visitors will be using a recent browser, so the background route may not be the way to go.

That being said, since you've given your <form> elements a fixed size and fixed top and left margin, they will of course shift when the viewport is a different size. FYI, since you made them absolute positioned, you can use the left, right, top, and bottom attributes instead of margin, i.e. top: -210px; and left:-175px;

If you want #main centered horizontally, use the auto value for the left and right values:

margin: 15% auto <<whatever_bottom_should_be>>

or

margin: 15% auto; -> top and bottom the same value, left and right the same value

That will tell the browser to split the available space equally to both side margins.

---

If you want them centered, you could use:

html{ width: 100%; margin:0px auto; }

#main{ width: 875px; height: 350px; background: url(images/form.png) 0 0 no-repeat; margin:0px auto; z-index: 1; }

#main form { width: 1014px; height: 228px; background: url(images/logo.png) 0 0 no-repeat; margin: 0px auto; z-index: 2; }

However, let us know if that was what you were after. Usually this setting would work fine if they were two different div tags.