How to add color over Image Background on Blogger?

How to add color over Image Background on Blogger?

2
data:blog.title
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. 
How to add color over Image Background on Blogger?
4 Stars stars - "How to add color over Image Background on Blogger?" In many Blogger template we see adding color over background image or Blog post images. This ...

Post a Comment

How could use this in effect photoshop?

Hi Enri..I have used pseudo-elements/gradient color for this output. But if you want to make to add this effect on PhotoShop then "Gradient Tool" and add 2 color on it. This is very easy. But it is not possible to teach you photoshop through commenting. Its all about practical learning. :t

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *