How To Create Full Width Background Image with Overlay Text

Bonus Tip: Creative image blending technique using mix-blend-mode property!

Hey guys and gals, no long no see, but I’m here again with more tips on front-end development and design. This week I want to show you easy way to add text overlay on image background and also one trick to add effect with mix-blend-property. Basically this property will blend colours on the image like ….

Also check my YouTube channel for video version of this trick.. and of course subscribe and give a thumb up if you like my content!

No more talking. Let’s get started!

HTML Section

Our markup is pretty straightforward, just one <section class="banner"> tag with <h1>.

<section class="banner">
 <h1>Snow. Ski. Let's Go.</h1>
</section>

CSS Section

As our markup so our styles are very basic. First we style h1 tag, after that we need to add our image for banner and to center our text with flex box layout. So our code for this steps are :

h1 {
  color: #fff;
  font-size: 4rem;
  z-index: 1;
  text-shadow: 1px 1px 16px #000000b8;
}

.banner {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(https://images.unsplash.com/photo-1616852282416-9a41299a1828?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80);
  height: 100vh;
  background-size: cover;
}

And we for last we need to add our little magic overlay with mix-blend-mode property. First we need to add to our .banner::after pseudo class content property to make it visible and make it absolute position with top and left to 0 and also our width and height set to 100%. After to make just need to add some background-colour, but to be more creative we will use background-image set to linear-gradient. This will allow us to add as much color as we like and mix them from one to another. Also we can set the angle of the colours.

So our basic overlay is ready, but if you want to make more professional looking and interesting you can use mix-blend-mode property and choose one of sixteen values. Every value will blend colours with the image differently and will make your image unique. Basically this property works like Photoshop blend modes. If you want to see all values and more for this property click on this link. In my image i choose to add color value. In the end our code should look like this:

.banner::after {
  content:"";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(120deg, #ae63e4, #33d0ff, #e463b0);
  opacity: .7;
  mix-blend-mode: color;
}

Our final version should look like this.

To view code on codepen click here.

Please subscribe to our youtube channel.