How to add color over Image Background on Blogger?

• Pseudo Elements
• Gradient  Color
• Box Shadow

Pseudo Elements For Tint Image

By using Pseudo Elements we can easily tint an image. For example purpose I have set the image width 300px X 313px and added dark color over the image by using pseudo elements. Just follow the below steps-

<style type="text/css">
.pseudo-elements {
position:relative;
width: 300px;
height: 313px;
background: url(IMAGE URL HERE);
}
.color:after {
content: '';
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.35);
}
</style>

<div class="pseudo-elements color"> </div>

Customization

• You can change the tint color by changing background: rgba(0, 0, 0, 0.35); color code.
• To make the color deep or light please change 0.35 with greater or lesser digit.
•  Replace IMAGE URL HERE with your Image link

Gradient  Color For Tint Image

Tinting an Image by using Gradient background color is really awesome. by using gradient color we can blend two colors at a time and image will looks beautiful.

<style type="text/css">
.gradient-color {
width: 300px;
height: 313px;
background:
linear-gradient(
rgba(255, 0, 92, 0.6),
rgba(0, 0, 0, 0.75)
),
url(IMAGE URL HERE);
}
</style>

<div class="gradient-color"></div>

Customization

• You can change the tint blending color by changing rgba(255, 0, 92, 0.6),  and rgba(0, 0, 0, 0.75) color code.
• To make the color deep or light please change 0.6 and 0.75 with greater or lesser digit.
•  Replace IMAGE URL HERE with your Image link

Box Shadow For Tint Image

There are another we that we can add a color tint on Blog images. This is alternative way of Pseudo Elements. By this ways we will add a color like shadow upon image box. To do this Just follow the below steps-

<style type="text/css">
.box-shadow  {
position:relative;
width: 300px;
height: 313px;
box-shadow: 0px 313px rgba(4, 151, 248, 0.65) inset;
background: url(IMAGE URL HERE);
}
</style>

<div class="box-shadow"></div>

Customization

• You can change the tint color by changing rgba(4, 151, 248, 0.65) color code.
• To make the color deep or light please change 0.65 with greater or lesser digit.
• Replace IMAGE URL HERE with your Image link