Background image section

Sections documentation

  1. Home
  2. Sections
  3. Image

Background image section

Lorem 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.

Variants

Image Parallax

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 row-13" style="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 pattern-name"></div> as first item and replace pattern-name with the pattern you want. Overlay pattern is a feature of Javascript and CSS, complete documentation and patterns list here.