We wanted to create a banner that could give a layered effect, similar to a Photoshop compilation. Why would we take this approach you ask? The main reason is so that we could change the images on the website dynamically (another post), have the headings as text, and have the banner be responsive.

In the example we want the image to align to the right, Then add a grey gradient over the image and then have the heading on top of that. Get amazing banners with layered images and gradients using HTML and CSS.

Example Image

We can achieve much of this effect using multiple styles within each background- declaration, separated by a comma with the first style at the top of the stack, and the last at the bottom. For example, the background-image is stacked with a gradient on top, followed by the image in the middle and then none image at the bottom. Other background- declarations handle the corresponding background-position, background-size and background-repeat styles for each layer separated by commas.

CSS

div.section-ban#test {
background-image: linear-gradient(to right, rgba(135, 148, 165, 1), rgba(255, 255, 255, 0)),url(https://www.inforest.com/wp-content/uploads/2022/01/StockSnap_C8R7JHDGFV_1280-opt.jpg), none;
background-color: #8794a5;
background-repeat: repeat-y, no-repeat, repeat;
background-position: 70% , right, left;
background-size: 30%, 50%, 50%;
}
.int-ban.row {
    background-size: cover;
    background-position: 50%;
    background-repeat:no-repeat
}

.int-ban.row {
    width: 80%;
    max-width: 1080px;
    position: relative;
    min-height:200px
}

.int-text {
    display: flex;
    align-items: center;
    justify-content: left;
    text-align:center
}

.int-text {
    line-height: 1.8em;
    font-family: 'Roboto', Helvetica, Arial, Lucida, sans-serif;
    font-size: 18px;
    line-height: 1.8em;
    max-width:700px
}

.inside-text h2, .inside-text .h2 {
    color: #fff !important;
    font-family: 'Roboto', Helvetica, Arial, Lucida, sans-serif !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 48px !important;
    letter-spacing: 3px;
    line-height: 1.3em;
    text-shadow:rgba(0, 0, 0, 0.71) 3px 3px 3px
}

.inside-text {
    max-width:50%
}

HTML

<div class="section-ban" id="test" >
                <div class="container">
                    <div class="int-ban row">
                        <div class="int-text">
                            <div class="inside-text">
                                <h2>Blog</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Results

This is a fun and interesting effect and it sets the stage for you to be able to change banner images and text on the fly using HTML/CSS. You may need to play with the sizings, and spacings using media queries to have this respond correctly. It also gives you a great looking banner with a gradient using one image and the rest CSS and HTML code. You can use this code as a base and get creative with it add transitions and style it however you want.

Learn more about HTML and CSS at WC3