CSS Background Image on Top of <Img>

CSS background image on top of img

You could use a pseudo-element. In this example, the :after pseudo element is absolutely positioned relative to the parent element. It takes the dimensions of the entire parent element, and the size of the parent element is determined by the size of the child img element.

.test {  display: inline-block;  position: relative;}.test:after {  content: '';  position: absolute;  top: 0; right: 0;  bottom: 0; left: 0;  background: url(http://placehold.it/20x20/1) repeat;}

<div class="test">    <img src="http://lorempixel.com/200/200"></div>

CSS Background-image over HTML img

try to use padding instead of using width and height

#content img{
    height: 0;
    width: 0;
    padding: 35px 120px; // adjust that depend on your image size
    background-image: url('YOUR_IMAGE_PATH');
    background-repeat: no-repeat;
}

CSS show div background image on top of other contained elements

I would put an absolutely positioned, z-index: 100; span (or spans) with the background: url("myImageWithRoundedCorners.jpg"); set on it inside the #mainWrapperDivWithBGImage .

How do I position one image on top of another in HTML?

Ok, after some time, here's what I landed on:

.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px green solid;
}

<div class="parent">
  <img class="image1" src="https://via.placeholder.com/50" />
  <img class="image2" src="https://via.placeholder.com/100" />
</div>

Place a background image over an image

The solution would be is to use wrapper with after pseudo element for accepted class:

.accepted:after {
    content: '';
    display: block;
    height: 18px;
    width: 18px;
    position: absolute;
    bottom: 0;
    right: 0;
    background-image:url("http://cdn1.iconfinder.com/data/icons/checkout-icons/32x32/tick.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    z-index: 100;
    background-size: 18px;
}

HTML

<div class="small-profile-img accepted">
    <img src="http://2.bp.blogspot.com/-KLcHPORC4do/TbJCkjjkiBI/AAAAAAAAACw/zDnMSWC_R0M/s1600/facebook-no-image1.gif" alt="Sample Image">
</div>

http://jsfiddle.net/vpgjr/7/

How to add a background image on top of a previous background image?

You can consider CSS variables. Specify 2 background layer that you can change later. You can easily scale to any number of background:

.container > div {  background:    /*we make the default value a transparent image*/    var(--im1,linear-gradient(transparent,transparent)),    var(--im2,linear-gradient(transparent,transparent));       height:200px;  width:200px;  display:inline-block;}
.background1 {  --im2: url(https://picsum.photos/200/300?image=0);}
.background2 {  --im2: url(https://picsum.photos/200/300?image=1069);}
.backgroundFilter {  --im1: linear-gradient(to right,transparent,green);;}

<div class="container"><div class="background1">...</div><div class="background1 backgroundFilter">...</div><div class="background2">...</div><div class="background2 backgroundFilter">...</div></div>

Hide img src and display background image on top not working

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>

How to add a color overlay to a background image?

I see 2 easy options:

multiple background with a translucent single gradient over image
huge inset shadow

gradient option:

html {
  min-height:100%;
  background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(http://lorempixel.com/800/600/nature/2);
  background-size:cover;
}

shadow option:

html {
  min-height:100%;
  background:url(http://lorempixel.com/800/600/nature/2);
  background-size:cover;
  box-shadow:inset 0 0 0 2000px rgba(255, 0, 150, 0.3);
}

an old codepen of mine with few examples

a third option

with background-blen-mode :

The background-blend-mode CSS property sets how an element's background images should blend with each other and with the element's background color.

html {
  min-height:100%;
  background:url(http://lorempixel.com/800/600/nature/2) rgba(255, 0, 150, 0.3);
  background-size:cover;
  background-blend-mode: multiply;
}

Need background image over another background image

There are two options, either use the CSS3 multiple backgrounds:

background-image: url(eagle.png), url(background-image.png);
background-position: left top, center top;
background-repeat: no-repeat;

or position the eagle over the background using position:Absolute;

CSS Background Image on Top of <Img>