How to add color over Image Background on Blogger?

How to add color over Image Background on Blogger?
tint image

In many Blogger template we see adding color over background image or Blog post images. This makes a image beautiful and some Blog designer tint an image by using different color. This all about CSS hack. We can add color tint 3 ways-
  • Pseudo Elements
  • Gradient  Color
  • Box Shadow
So in this tutorial I will show you 3 example of tint a image easily.


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-


box shadow


<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.


gradient color


<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-


pseudo elements


<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
I hope you are now able to tint blog image easily by using these CSS trick. For any further help feel free to leave a comment below. Thank You. 
Go Up