Is there a way to apply background color on <img> tag?

Yes it's possible. You just need to apply padding to image. Then you can get the result below:

or

You also can use .png images and apply transparent property.

img {
  max-width: 50%;
}

<img src="http://pngimg.com/uploads/mario/mario_PNG53.png" style="background-color:red;padding:20px;">

You could make use of the background-blend-mode property.

In particular, the background-blend-mode: multiply seems to be what you need here.

From the spec:

multiply blend mode

The source color is multiplied by the destination color and replaces the destination.

.image {
  width: 200px;
  height: 150px;
  background-image: url(https://placeimg.com/200/150/animals);
}

.blended {
  background-color: red;
  background-blend-mode: multiply;
}

<div class="image"></div>
<div class="image blended"></div>

NB:

As you can't change your markup, there is still a way to style the images in the above way. (although it's a little bit hacky)

We can replace the img with the same background image with css by adding padding to the image and then setting the width and height of the image to zero. (more details here)

img {
  padding: 75px 100px;
  width: 0;
  height: 0;
  background-color: red;
  background-blend-mode: multiply;
  background-image: url(https://placeimg.com/200/150/animals);
}

<img src="https://placeimg.com/200/150/animals">

Since you use Slick slider, you might want to do something like the example below. As noticed before, you also might want to use PNG instead of JPG since PNG has the support of transparency.

.slick-slide .image img {
   background-color: red;
   padding: 5px; //some padding to show the background color
}