Adding a fixed banner over showcase image?

Hi, I’m trying to add a banner over the showcase image to my site, much like this example:

Also, it’s important that it’s responsive.

Is there an easy way to go about doing this? My website being:


This should help get you started in the right direction.


<section id="hero">
    <div class="row">
    <div class='hero__overlay">Overlay content</div>


#hero { position: relative; }
.hero__overlay { position: absolute; top: 0; left: 10px; } /* Change top & left to whatever works best */