Insert image between two divs - html

Question

I need to insert photo in between divs (blue and light-blue) as in the following example.
I did it with absolute positioning:
HTML:
#*Blue and light-blue sections with photo*#
<div style="width: 100%; height: 120px; background-color: #0052a4"></div>
<div style="width: 100%; height: 120px; background-color: #c2dffd">
<div class="image">
<img src="/Content/pictures/MainPhoto.png" />
</div>
</div>
CSS:
.image {
position: absolute;
bottom: -100px; /* bottom space */
right: 100px; /* right space */
}
.image img {
display: block;
}
But this way doesn't work correctly when you change the screen resolution of the device.
I create JSFiddle with this example.
Could you please to suggest another way to resolve this problem?
I need to create responsive design without hardcoded values.
Thanks! :)

Answer 1

you could just use a background and a padding to keep image from sides : DEMO
HTML
<div class="imaged">
<img src="http://lorempixel.com/800/180/food/7"/>
</div>
CSS
.imaged {
padding:20px;
text-align:center;
background:url(my-blue-light-blue-bg.jpg)repeat-x center ;
}
img {
border:solid white 4px;
vertical-align:top;/* or display:block; + margin:auto;*/
}
from your fiddle: inset box-shadow in a single div works too : DEMO 2 / DEMO 3
<div style="
padding:0 20px;
display:table;
min-width: 100%;
box-shadow:
inset 0 120px 0 #0052a4,
inset 0 -120px 0 #c2dffd;
height:244px;
line-height:244px;
text-align:center;
">
<img src="http://lorempixel.com/842/176/city" style="border:solid white 4px;"/>
</div>

Answer 2

HTML
<div class="container-box">
<div style="width: 100%; height: 120px; background-color: #0052a4"></div>
<div style="width: 100%; height: 120px; background-color: #c2dffd"></div>
<div class="image">
<img src="http://media1.santabanta.com/full1/Outdoors/Landscapes/landscapes-267a.jpg" />
</div>
</div>
CSS
.container-box {
position:relative;
}
.container-box img {
height:200px;
width:90%;
position:absolute;
top:20px;
left:5%;
border:3px solid #fff
}
Of course I'd never use inline CSS, but there you go. See fiddle here

Answer 3

I think this is what you are trying to do:
http://jsfiddle.net/dc6r1bny/
.image {
position: absolute;
bottom: 30px; /* bottom height */
left: 50%; /* position element 50% from left side */
margin-left: -421px; /* bring it back left half the image size */
}
Then for mobile, you will just need to use media queries to adjust the image size to be 100%, remove the margin, etc. when you hit roughly 842px.

Answer 4

add this css code to the image. it should work.
margin-right:auto;
margin-left:auto;