Adding a background-image on an <img> itself?

Is it possible to add a background-image on an <img> tag? I cannot create a <div> around it for now (due to other restraints). I'm wondering if it's possible on just the <img> tag. Thanks.

img {
  width: 500px;
  background-image: url('https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png');
  background-repeat: no-repeat;
  z-index:100;
}

<img src="https://www.cieau.com/wp-content/uploads/2019/11/eau_nature.jpg">

Solution

Use padding and add the image there:

img {
  width: 300px;
  padding:0 0 50px 0;
  background: url('https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png') bottom right/auto 50px;
  background-repeat: no-repeat;
}

<img src="https://www.cieau.com/wp-content/uploads/2019/11/eau_nature.jpg">

Like below by considering multiple backgrounds and by keeping only the padding area:

img {
  width: 0;
  height:0;
  padding:300px 500px 0 0;
  background: 
    url('https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png') bottom right/auto 50px,
    url(https://www.cieau.com/wp-content/uploads/2019/11/eau_nature.jpg) center/cover;
  background-repeat: no-repeat;
}

<img src="https://www.cieau.com/wp-content/uploads/2019/11/eau_nature.jpg">