The first time I tried this, I used opacity on the image but it didn’t work like I wanted, the styling made even the overlay texts to be opaque by taking the same opacity styling with the image. And so I went into finding a solution for this and after long trials, searches, Stack Overflows, I finally stumbled unto the answer and yeah it’s kind of a trick, CSS tricks actually.
Lets create a js file and inside it have two divs, and some heading tags like below
<div className="container"> <div> <h1> CSS Tricks </h1> <h5> You can now style the second div and heading tags as you see fit </h5> </div> </div> That would be enough for now, then we head over and create a css file and start writing the magic
.container { position: relative; color: white; /*Note, you can change the color to your choice depending on your image and what color blends with it*/ } .container::after { content: ""; opacity: 0.8; background: rgb(26, 31, 41) url("your picture") no-repeat fixed top; background-blend-mode: luminosity; /* also change the blend mode to what suits you, from darken, to other many options as you deem fit*/ background-size: cover; top: 0; left: 0; right: 0; bottom: 0; position: absolute; z-index: -1; height: 500px; } This is it. The little css that will suite your web image displays...Below is the full code image
Hope this article meets you well and be a solution, Thanks.
Top comments (0)