I have the following layout (I\'m using Meteor):
Although this doesn't directly relate to the html sizing problems, I recently discovered a much easier way to achieve this sort of "transparent film" thing, using box-shadow.
This article breaks it down pretty well. He also offers other methods, but frankly this seems like the simplest.
.example {
position:relative;
width: 300px;
height: 313px;
box-shadow: 0px 313px rgba(255, 0, 92, 0.6) inset;
background: url(/img.png);
}