Backgrounds Last updated: 01.07.2020

Background 001 - Inset

Any element that is given this background class will be treated with a background that takes up 60% of the containers height, vertically aligned in the center of the element.

Implementation:
The classes within the two wrapper divs you see in the HTML Output are required to apply backgrounds around any of your elements:

<div class="tl-bg-1-wrap [COLOR CODE CLASS]">
    <div class="tl-bg-1-space">

Color Picker:
Select the element you'd like to adjust the color of (in this case, our only option is to select "background"). Once selected, click on any color to preview the potential output.

HTML Output

<!-- wp:html -->
<div class="tl-bg-1-wrap">    
    <div class="tl-bg-1-sapce">
        <!-- Insert your content below -->
        <div class="tl-sample-content-wrap">
                <div class="container">
                    <div class="row">
                        <div class="col-12 col-md-6 col-lg-4 col-xl-4">
                            <div class="tl-sample-box">
                                <h3>Sample box</h3>
                                <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                            
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-lg-4 col-xl-4">
                            <div class="tl-sample-box">
                                <h3>Sample box</h3>
                                <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                            
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-lg-4 col-xl-4">
                            <div class="tl-sample-box">
                                <h3>Sample box</h3>
                                <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                            
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Insert your content above -->
    </div>    
</div>
<!-- /wp:html -->
&lt;!-- wp:html --&gt; &lt;div class=&quot;tl-bg-1-wrap&quot;&gt; &lt;div class=&quot;tl-bg-1-sapce&quot;&gt; &lt;!-- Insert your content below --&gt; &lt;div class=&quot;tl-sample-content-wrap&quot;&gt; &lt;div class=&quot;container&quot;&gt; &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;col-12 col-md-6 col-lg-4 col-xl-4&quot;&gt; &lt;div class=&quot;tl-sample-box&quot;&gt; &lt;h3&gt;Sample box&lt;/h3&gt; &lt;p&gt; Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;col-12 col-md-6 col-lg-4 col-xl-4&quot;&gt; &lt;div class=&quot;tl-sample-box&quot;&gt; &lt;h3&gt;Sample box&lt;/h3&gt; &lt;p&gt; Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;col-12 col-md-6 col-lg-4 col-xl-4&quot;&gt; &lt;div class=&quot;tl-sample-box&quot;&gt; &lt;h3&gt;Sample box&lt;/h3&gt; &lt;p&gt; Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Insert your content above --&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- /wp:html --&gt;
  • bg-bsd-pink
  • bg-bsd-lpink
  • bg-bsd-purple
  • bg-bsd-lpurple
  • bg-bsd-red
  • bg-msw-dblue
  • bg-msw-lblue
  • bg-at-red
  • bg-at-blue
  • bg-link-blue
  • bg-text
  • bg-gray-1
  • bg-gray-2
  • bg-gray-3
  • bg-gray-4
  • bg-gray-5
  • bg-white
  • bg-black
  • reset

Sample box

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Sample box

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Sample box

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Background 002 - Full

Any element that is given this background class will be given a background color that is applied to the entire container.

Implementation:
The classes within the wrapper div you see in the HTML Output is required to apply backgrounds around any of your elements:

<div class="tl-bg-2-wrap [COLOR CODE CLASS]">

Color Picker:
Select the element you'd like to adjust the color of (in this case, our only option is to select "background"). Once selected, click on any color to preview the potential output.

HTML Output

<!-- wp:html -->
<div class="tl-bg-2-wrap"> 
    <!-- Insert your content below -->
    <div class="tl-sample-content-wrap">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                        <h3>Sample box</h3>
                        <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>                            
                </div>
            </div>
        </div>
    </div>
    <!-- Insert your content above -->
</div>
<!-- /wp:html -->
&lt;!-- wp:html --&gt; &lt;div class=&quot;tl-bg-2-wrap&quot;&gt; &lt;!-- Insert your content below --&gt; &lt;div class=&quot;tl-sample-content-wrap&quot;&gt; &lt;div class=&quot;container&quot;&gt; &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;col-sm-12&quot;&gt; &lt;h3&gt;Sample box&lt;/h3&gt; &lt;p&gt; Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Insert your content above --&gt; &lt;/div&gt; &lt;!-- /wp:html --&gt;
  • bg-bsd-pink
  • bg-bsd-lpink
  • bg-bsd-purple
  • bg-bsd-lpurple
  • bg-bsd-red
  • bg-msw-dblue
  • bg-msw-lblue
  • bg-at-red
  • bg-at-blue
  • bg-link-blue
  • bg-text
  • bg-gray-1
  • bg-gray-2
  • bg-gray-3
  • bg-gray-4
  • bg-gray-5
  • bg-white
  • bg-black
  • reset

Sample box

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Background 003 - Pattern

Any element that is given this background class will have the selected pattern with color overlay applied to the entire element's background.

Implementation:
The classes within the wrapper div you see in the HTML Output is required to apply backgrounds around any of your elements:

<div class="tl-bg-3-wrap [COLOR CODE CLASS] [PATTERN CLASS]">

If no pattern is specified, we default to the primarily gray background pattern found on BSD's home page.

Color Picker:
Select the element you'd like to adjust the color of (in this case, our only options are to select "pattern" and "background"). Once selected, click on any color or pattern to preview the potential output.

HTML Output

<!-- wp:html -->
<div class="tl-bg-3-wrap">
    <!-- Insert your content below -->
    <div class="tl-sample-content-wrap">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                        <h3>Sample box</h3>
                        <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>                            
                </div>
            </div>
        </div>
    </div>
    <!-- Insert your content above -->
</div>
<!-- /wp:html -->
&lt;!-- wp:html --&gt; &lt;div class=&quot;tl-bg-3-wrap&quot;&gt; &lt;!-- Insert your content below --&gt; &lt;div class=&quot;tl-sample-content-wrap&quot;&gt; &lt;div class=&quot;container&quot;&gt; &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;col-sm-12&quot;&gt; &lt;h3&gt;Sample box&lt;/h3&gt; &lt;p&gt; Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Insert your content above --&gt; &lt;/div&gt; &lt;!-- /wp:html --&gt;
  • bg-bsd-pink
  • bg-bsd-lpink
  • bg-bsd-purple
  • bg-bsd-lpurple
  • bg-bsd-red
  • bg-msw-dblue
  • bg-msw-lblue
  • bg-at-red
  • bg-at-blue
  • bg-link-blue
  • bg-text
  • bg-gray-1
  • bg-gray-2
  • bg-gray-3
  • bg-gray-4
  • bg-gray-5
  • bg-white
  • bg-black
  • reset


  • tl-p-001
  • tl-p-002
  • tl-p-003
  • tl-p-004
  • tl-p-005
  • tl-p-006
  • tl-p-007
  • tl-p-008
  • tl-p-009
  • tl-p-010
  • reset

Sample box

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Background 004 - Diagonal

Any element that is given this background class will be treated with an angled background (skewed at 4 degrees) that contains the entire block of content it's wrapped around.

Implementation:
The classes within the wrapper divs you see in the HTML Output are required to apply backgrounds around any of your elements:

<div class="tl-bg-4-wrap [COLOR CODE CLASS]">
    <div class="tl-bg-inner-4">

Color Picker:
Select the element you'd like to adjust the color of (in this case, our only option is to select "background"). Once selected, click on any color to preview the potential output.

HTML Output

<!-- wp:html -->
<div class="tl-bg-4-wrap"> 
    <div class="tl-bg-inner-4">
        <!-- Insert your content below -->
        <div class="tl-sample-content-wrap">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                            <h1>Sample box</h1>
                            <p class="text-white"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>                            
                    </div>
                </div>
            </div>
        </div>
        <!-- Insert your content above -->
    </div>
</div>
<!-- /wp:html -->
&lt;!-- wp:html --&gt; &lt;div class=&quot;tl-bg-4-wrap&quot;&gt; &lt;div class=&quot;tl-bg-inner-4&quot;&gt; &lt;!-- Insert your content below --&gt; &lt;div class=&quot;tl-sample-content-wrap&quot;&gt; &lt;div class=&quot;container&quot;&gt; &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;col-sm-12&quot;&gt; &lt;h1&gt;Sample box&lt;/h1&gt; &lt;p class=&quot;text-white&quot;&gt; Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Insert your content above --&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- /wp:html --&gt;
  • bg-bsd-pink
  • bg-bsd-lpink
  • bg-bsd-purple
  • bg-bsd-lpurple
  • bg-bsd-red
  • bg-msw-dblue
  • bg-msw-lblue
  • bg-at-red
  • bg-at-blue
  • bg-link-blue
  • bg-text
  • bg-gray-1
  • bg-gray-2
  • bg-gray-3
  • bg-gray-4
  • bg-gray-5
  • bg-white
  • bg-black
  • reset

Sample box

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s