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

user_14948460 0
Viewed 346

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>
css html
2 Answers

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>

user_161162020

You can do it like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Page Title</title>
    <style type="text/css">
        .black-bg {
            background: black;
        }
    </style>
</head>
<body>
    <img class="black-bg" width="100" height="150" src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Trifolium_hybridum_inflorescence_-_Keila.jpg" />
</body>
</html>

user_165847780
Related