Making overlaying divs equal using css - html

Question

I have one div overlaying another div as follows:
div.container {
position: relative;
min-height: 100%;
margin:0;
padding:0;
background:url('http://www.scratchprogramming.org/img/book.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 62% 70%;
overflow:hidden;
}
div.content {
position: absolute;
min-height: 100%;
margin:0;
padding:0;
top: 0;
left: 0;
width:100%;
z-index:10;
overflow:hidden;
}
My html starts out like this:
<div class="container">
<p id="catImage">
<img src="img/Scratchcat.png" alt="cat" />
</p>
</div><!--container-->
<div class="content">
Now I had to set the height on the cat image really long so that the background image in the container (book.png) will fill the content area.
The problem is when testing on different browsers... somtimes the book.png background goes over the content length, leaving a couple of inches extra on the bottom.
Is there any way I can make the content and container height the same using css and not having to play around with the image height ?
Here is the working example: http://www.scratchprogramming.org

Answer 1

I came up with a solution very similar to this:
How to make one div's height depended of another div's height?
Thanks, everyone.

Answer 2

Try this:
body {
background: url('http://www.scratchprogramming.org/img/book.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.scratchprogramming.org/img/book.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.scratchprogramming.org/img/book.png', sizingMethod='scale')";
}