Opacity only to Background image of div

We can do more neat things using css and css3. Opacity is one of the great property of css. Setting opacity level to html elements directly is a simple thing. But we can also set the opacity only to Background image of html elements. We can implement background image's opacity property using two methods.

Method1: Opacity to Background image of div using css's pseudo elements.

This one is most preferred method used to make opacity on background image. Css3 has psuedo elements to support and make easy of complicated effects.
Eventually, one nice demo on CodePen:

Eventually, one nice demo on CodePen:

See the Pen Opacity to background image2 by Suresh (@phpguidesuresh) on CodePen.

Method2: Opacity to Background image of div using positioning an image.

This is a one of the most featured method for background image's opacity. Here img tag seems to be used as background image. Relative positioning of image is important.

Eventually, one nice demo on CodePen:

See the Pen Opacity to background image by Suresh (@phpguidesuresh) on CodePen.