jumbotron background image overlay code example

Example 1: overlay jumbotorn

.jumbotron {
    position: relative;
    background: url(../img/img_nature.jpg);
    background-size: cover;
}

.jumbotron > .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 132, 230, 0.85);
    z-index: 1;
}

.jumbotron > .inner {
    position: relative;
    z-index: 2;
}

Example 2: overlay jumbotorn

<div class="jumbotron">
    <div class="overlay"></div>
    <div class="inner">
        <h1 class="display-3">Hello, world!</h1>
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        <hr class="my-4">
        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
        <p class="lead">
            <a class="btn btn-secondary btn-lg" href="#" role="button">Learn more</a>
        </p>
    </div>
</div>