My absolute image needs to be responsive - html

Question

I'm having trouble getting my image to be responsive. It's a image that sits above another image, so I used absolute positioning. If I make the page smaller, everything gets all out of whack.
This is my css for the image that sits above the other image.
.page-header .logo img {
position: absolute;
top: 240%;
left: 126%;
width: 200px;
height: 150px;
padding:1px;
border:1px solid #021a40;
background-color:#000;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}
And this is the css for the image behind it.
.page .carousel img {
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
How can I make the above image to resize properly with the image behind it?

Answer 1

Here's a little fiddle I put together to get you closer. Depending on the size of the logo, you'll have to adjust the percentages a little bit to get what you want.
HTML
<div class='page-header'>
<div class='carousel' id='portfolio-carousel'>
<img alt="1396051485478" src="http://www.placehold.it/650x350" class="bg" />
</div>
<div class="logo-wrap">
<img alt="Logo" src="http://www.placehold.it/250x150" class="logo" />
</div>
</div>
CSS
.page-header {
position:relative;
width:100%;
}
.logo-wrap {
width:100%;
position:absolute;
margin-top:-43%;
}
.logo {
position: absolute;
padding:1px;
border:1px solid #021a40;
background-color:#000;
top:22%;
left:25%;
width:50%;
}
.carousel {
position:relative;
width:100%;
}
.bg {
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
width:100%;
}
Fiddle
http://jsfiddle.net/disinfor/9b332ghd/4/
I believe this will get you what you are looking for. Also, I may have changed some of your class names while I was troubleshooting it for you.