Section

Background image section

IMAGE BACKGROUND SECTION
WITH OVERLAY

L'orem ipsum dolor, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

IMAGE BACKGROUND SECTION

L'orem ipsum dolor, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Usage

<div class="section-bg-image" style="background-image: url('http://www.framework-y.com/images/thumb-large.png');">
    <div class="container content">
        <div class="row">
                ...
        </div>
    </div>
</div>
<div class="section-bg-image box-middle-container overlay-container" style="height:600px; background-image: url('http://www.framework-y.com/images/thumb-large.png');">
    <div class="bg-overlay transparent-dark"></div>
    <div class="container content overlay-content box-middle white text-center">
        <h1 class="main-title text-xl">IMAGE BACKGROUND SECTION<br /> WITH OVERLAY</h1>
        <p>
            ...
        </p>
    </div>
</div>                     

Main settings

Name Type Description
Background color section HTML You can use a background color section with HTML <div class="section-bg-color"> ... </div>.
Centered content CSS class Add class box-middle-container to section object and class overlay-content to content object.
Centered content is a feature of base components. Complete documentation here
Overlay pattern Mixed 1 ) Add class overlay-container to target object and class overlay-content to content object.
2 ) Add object <div class="bg-overlay dotted"></div> into first row of target object.
Overlay pattern is a feature of base components. Complete documentation here