This css hack is useful when you’re using a hero image and displaying entry title over featured hero image on your blog post.
Either way, there are several ways of doing this. However, as stated in this discussion, only some hacks are more efficient than others.
For example, you could use Box Shadow property to achieve this effect; however, it might negatively affect your site’s performance on mobile devices.
Here’s a nice discussion on this over at Stack Overflow.
Apparently, the most efficient approach to use a semi-transparent color layer over your background image is as follows:
background-image: linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.9)), url(enteryourimageurl.jpg)
Sir, Where to add background-image: linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.9)), url(enteryourimageurl.jpg) ?
If possible can you please share more steps?
Hey Dipam,
You need to add this to your CSS file. Here are the steps:
To add a background image, we use the following css:
background-image: url(‘yourimage.jpg’);
Note: replace yourimage.jpg with the actual image url you want to use as your background.
To add a layer over the background image, we use the following css:
background-image: linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.9)), url(‘yourimage.jpg’);
I hope this makes sense.