Centering images WITHIN other images, and preserving responsiveness - html

Question

I'm a newbie, and I've quickly gotten in over my head:
I'm trying to create a pattern I can re-use throughout my site:
two photos, side by side, each with watercolor splashes peeking out from behind them.
They should scale appropriately down to the smallest screens (I'm pretty agnostic about whether they wrap or not on tiny screens).
Here's my code:
.two-pics {
width: 100%;
}
.wc-pic-blue {
width: 40%;
background-image: url('http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c4007c65e4c37e086e54/1464452096489/_watercolor-splash-blue.jpg');
background-size: contain;
background-repeat: no-repeat;
float: left;
padding: 4%;
}
.wc-pic-pink {
width: 40%;
background-image: url('http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c4077c65e4c37e086e6d/1464452103387/_watercolor-splash-magenta.jpg');
background-size: contain;
background-repeat: no-repeat;
float: right;
padding: 4%;
}
<div class="two-pics">
<div class="wc-pic-blue pic">
<img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c529b09f953f29724252/1464452394022/8248798.jpg">
</div>
<div class="wc-pic-pink pic">
<img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749ca6e37013bafc39f394d/1464453743501/parade-2.jpg">
</div>
<br style="clear: left;" />
</div>
My instinct was to wrap two Divs (identical but for their source images) with background images (the watercolor splashes) inside a parent Div, then stick images within each of the child Divs — and I tried to center the images (both vertically and horizontally) within each of the child Divs, so the watercolor splashes would be equally visible on all sides;
By some miracle this actually worked — mostly — but I was finding weird phantom space when I inspected the page; the inner images were never quite centering correctly within their watercolor Divs.
There's also weird stuff happening upon scaling :(
I'm desperately confused — should I be using Flexbox? Nested Divs with background-images?
Here's my Fiddle if anyone is feeling brave and generous :)
Any help would be so appreciated!

Answer 1

Here's a solution with the following features:
flex layout
viewport percentage units for sizing the images
absolute positioning to center one image over the other
media query for vertical alignment on smaller screens
.two-pics {
display: flex;
justify-content: space-around; /* 1 */
}
.pic {
position: relative;
}
img:first-child {
height: 30vw; /* 2 */
}
img:last-child {
height: 25vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 3 */
}
#media (max-width: 600px) {
.two-pics {
flex-direction: column;
align-items: center;
}
}
<div class="two-pics">
<div class="pic">
<img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c4007c65e4c37e086e54/1464452096489/_watercolor-s.jpg" alt="">
<img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c529b09f953f29724252/1464452394022/8248798.jpg" alt="">
</div>
<div class="pic">
<img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c4077c65e4c37e086e6d/1464452103387/_watercolor-splash-magenta.jpg" alt="">
<img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749ca6e37013bafc39f394d/1464453743501/parade-2.jpg" alt="">
</div>
</div>
https://stackoverflow.com/a/33856609/3597276
https://stackoverflow.com/a/32174347/3597276
https://stackoverflow.com/a/36817384/3597276
Revised Fiddle

Answer 2

I centered the images on the screen by aligning the left div right and solved the scaling problem. I also added a #media query for smaller screens, it looks very fine.
Improved Fiddle
.two-pics {
width: 100%;
}
.wc-pic-blue {
width: 49%; /* decrease for more space between images */
box-sizing: border-box;
background-image: url('http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c4007c65e4c37e086e54/1464452096489/_watercolor-splash-blue.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: top right;
float: left;
padding: 4%;
text-align: right;
}
.wc-pic-pink {
width: 49%; /* decrease for more space between images */
box-sizing: border-box;
background-image: url('http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c4077c65e4c37e086e6d/1464452103387/_watercolor-splash-magenta.jpg');
background-size: contain;
background-repeat: no-repeat;
float: right;
padding: 4%;
}
.two-pics .pic img {
max-width: 100%;
}
#media (max-width: 500px) {
.two-pics .pic {
width: 100%;
padding: 8%;
}
.two-pics .pic img {
width: 100%;
}
}
<div class="two-pics">
<div class="wc-pic-blue pic">
<img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c529b09f953f29724252/1464452394022/8248798.jpg">
</div>
<div class="wc-pic-pink pic">
<img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749ca6e37013bafc39f394d/1464453743501/parade-2.jpg">
</div>
<br style="clear: left;" />
</div>