Centering images WITHIN other images, and preserving responsiveness

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!

The best way (semantically, and probably programmatically) would be to set the splash as a background-image, and the image as an actual image. — Bram Vanroy, May 29 '16 at 12:48

score 0 · Accepted Answer · edited May 23 '17 at 12:31

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>

Revised Fiddle

Thank you! This is brilliant! I also think I can learn something by examining this code :) Thanks again. — Elyse, May 29 '16 at 14:28

score 0 · Answer 2 · answered May 29 '16 at 13:41

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>

Thanks so much for your help, Aloso — this also seems to achieve exactly what I'm trying to do. Much appreciated! — Elyse, May 29 '16 at 14:29

Centering images WITHIN other images, and preserving responsiveness

2 Answers2