Background image with size contain and image element overlaying it

[beepboop]

I have a div with a background image set at 100% width and a height of about 700px (think great big hero image on the homepage).

I also have a smaller image (just a plain ol’ image element) nested inside of the background image div (mentioned earlier). I have this nested image horizontally centered and it is visually “interacting” with something on the background image (sort of “sitting on top of it”, if you will)

When I resize the browser horizontally, the background image resizes, which is perfectly fine, however, it is being made smaller vertically (also fine). This does throws off the “interaction overlay” between the background image and the image on top of it.

Is there an easy way to dynamically resize the overlay image, so that it always maintains it’s position relative to the background image. Hope this makes sense, and thanks for any help!

Here is some sample code:

<div class="hero">
  <img src="someimage.png">
</div><!-- /end .hero -->

.hero {
  background: url(img/hero-image.jpg);
  background-repeat: no-repeat;
  height: 794px;
  background-size: contain;
  position: relative;
}

.hero img {
  position: absolute;
  left: 50%;
  margin-left: -264px;
}

[Paulie_D]

We’d need to see a working (or rather non-working) example…perhaps in Codepen with actual images.

At the moment, I’m thinking this is not possible (with pure CSS) unless there is some information we don’t have yet.

[Author]

Posts