How to set background colour of an image as black colour?

Issue

I have an html image

<img src="abc.png">

and I want while the image is being loaded in the browser on a slower connection. The background / placeholder of image appear appear black. Is it possible by giving a class to the image and then setting the css property background-color: black;

<img class="black-back" src="abc.png">

<style>
.black-back {
background-color: rgb(0,0,0);
}
 </style>

Solution

I inserted the image in div and set the size of image to cover so div will occupy the space as size of image. However if your remove the background properties the div occupy the full line.I hope this is what you are looking for.

<img class="black-back" src="abc.png">



<style>
.black-back img{
background-repeat:no-repeat;
background-size:cover;
}

.black-back {
background-color: rgb(0,0,0);
}
 </style>

the below code is without background styling properties

<div class="black-back">
<img  src="abc.png">
</div>


<style>
.black-back {
background-color: rgb(0,0,0);
}
</style>

Answered By – U-33

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published