CSS Fluid: fixed to background - html

Question

I have a fiddle here.
CSS:
body, html{
background: url("http://i62.tinypic.com/25qdg86.png") no-repeat center center fixed;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:100% 100%;
}
#img {
width:70%;
display:inline-block;
background-color:red;
position:absolute;
bottom:12%;
height:70%;
margin-top:-80px;
margin-left:100px;
}
HTML:
<div id="img"> </div>
Is it possible to make the id tag called #img look like it's fixed to the background?
I am simply trying to make the red block fluid between the blue box (look at the fiddle).
So if you adjust the resolution of the page the red block will not go out of the blue box height-wise, but it will go out of the blue box width-wise.
So basically I want to make sure the red block (#img) stays within the blue box that is on the background image. How can I do this?

Answer 1

Percentages and pixels don't mix that well... Change it all to percentages, for example like this:
#img {
width: 74.1%;
display: inline-block;
background-color: red;
position: absolute;
height: 71.8%;
top: 17%;
left: 13.2%;
}
Fiddle: http://jsfiddle.net/Niffler/r3nW8/43/

Answer 2

Sure you can:
http://jsfiddle.net/r3nW8/44/
body, html {
background: url("http://i62.tinypic.com/25qdg86.png") no-repeat center center fixed;
background-repeat:no-repeat;
-webkit-background-size: 100% 100%; /* use 100% 100% everywhere */
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
#img {
background-color:red;
position:absolute;
margin: 0 auto;
top:18%; /* not 15% cause you have more space on the top area! :) */
left:0;
bottom:0;
right:0;
height:70%;
width:73%; /* note the blue border on your image is not positioned well... */
}
With some more % tweaks you can achieve perfect results: http://jsfiddle.net/r3nW8/45/