2

I have a problem hiding the <img src="/"> and overlay the background image on a media 480px version.

I tried to use the code based on CSS background image on top of <img> and it doesn't work for me.

JDFIDDLE

HTML

<div class="j_img-overlay">
    <img src="https://image.flaticon.com/teams/slug/freepik.jpg">
</div>

CSS

.j_img-overlay {
   width: 100px;
   height: 100px;
}

.j_img-overlay img {
   background-size: auto;
   background: url(http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png) no-repeat;
   position: relative;
   box-sizing: border-box;
   width: 100px;
   max-width: 100px;
   z-index: 100;
   }
Christian Luneborg
  • 493
  • 7
  • 19

1 Answers1

2

First of all <img/> element should not display background-image. Additionally, only background property let you adjust all of the available background style options at once so, unfortunately background-image can takes only image urls and not repeating value.

Find here more about Background Image and Background css properties.

To make the overlay works properly you can using pseudo element (after, before) with absolute positioning to fill the container of the image element. Relative position is required for the container to avoid leakage of the pseudo element (with the absolute position that we defined).

Find here more about Pseudo Elements - CSS.

Working example:

.j_img-overlay {
  position: relative;
  width: 100px;
}
.j_img-overlay::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png) no-repeat;
  background-size: cover;
}

.j_img-overlay img {
  display: block;
  width: 100%;
}
<div class="j_img-overlay">
  <img src="https://image.flaticon.com/teams/slug/freepik.jpg">
</div>
Zeev Katz
  • 2,273
  • 2
  • 16
  • 42
  • Thank you so much! It works, but the image does not let me change the size. If I decrease the image smaller, It chops off on the bottom of the image instead of smaller. Also the `` did not hide, but just overlay it. I have two images in two different sizes and I can see two images overlay each other. The jsfiddle was an example of two same sizes of the images and cannot see the image behind the first image. How do I change size without chopping the image and actually hide the other one? – Christian Luneborg Feb 02 '18 at 16:25
  • 1
    Edited my answer. Now, overlay container has auto height that changed by content size (the image element in our case) so, when the container width changed, image width goes to changed and the height by the image ratio. The overlay mask that we created purpose to react to those changes, width by container's width and height by image's height. If the container will be contentless, you will not see anything. That will happen because there's no content that should define our container height. – Zeev Katz Feb 02 '18 at 16:50
  • Thank you - on the second overlayed image, I changed the width/height to 70% and there the first image is shown behind the second image and it doesn't actually hide the first image. – Christian Luneborg Feb 02 '18 at 17:02
  • @ChristianLuneborg Please add example – Zeev Katz Feb 02 '18 at 19:58
  • http://jsfiddle.net/magnix2k/yw8uZ/269/ here's the example with width/height 70% and you can see the first image behind it. It's not hidden. – Christian Luneborg Feb 02 '18 at 20:05
  • @ChristianLuneborg Hope my answer was satisfying! – Zeev Katz Feb 02 '18 at 21:04
  • 1
    It was. Appreciate it! – Christian Luneborg Feb 02 '18 at 21:19