Background Image Section

Component Props

    
      bgImageSm: [string] - Image source for background image on smaller viewports
      bgImageLg: [string] - Image source for background image on larger viewports
      minHeight: [number] - Optional: Add minimum height for section. Based on viewport height. Values: 50, 65, 75, 90, 100
      contentCenter: [boolean] - Optional: Center align content in section.
      darkTheme: [boolean] - Optional: Applies dark background with white text to content area
    
  

Base Example

  	
  		<section class="rbn-bg-section text-bg-light" style="--rbn-bgimg-sm: url('../img/fpo/fpo-image-1-1.jpg'); --rbn-bgimg-lg: url('../img/fpo/fpo-image-16-9.jpg');">
    <div class="container-xxl">
      <div class="row rbn-section-space justify-content-center">
  
        <div class="col-lg-8 d-flex">
          <div class="section-content-center">
            <!-- BEGIN: Section Content -->
              <h2>Section Title</h2>
              <p>Quis, ex, qui modi quibusdam architecto eligendi, sed perspiciatis voluptatem vitae incidunt repellat.</p>
              <a class="btn btn-primary">CTA Button</a>
            <!-- END: Section Content -->
          </div>
        </div>
  
      </div>
    </div>
    <div class="section-overlay"></div>
  </section>
  
  	
  

Left Aligned Content

  	
  		<section class="rbn-bg-section text-bg-light" style="--rbn-bgimg-sm: url('../img/fpo/fpo-image-4-3.jpg'); --rbn-bgimg-lg: url('../img/fpo/fpo-image-16-9-r.jpg');">
    <div class="container-xxl">
      <div class="row rbn-section-space min-vh-90">
  
        <div class="col-lg-6 col-xxl-4 d-flex">
          <div class="section-content-start">
            <!-- BEGIN: Section Content -->
            <h2>
              Section Title
              <span class="subhead">Section Subheader</span>
            </h2>
            <p class="mt-auto">Ipsa blanditiis nihil commodi eligendi veritatis nam aliquam asperiores. Debitis, impedit doloribus earum, deleniti rerum voluptatem nemo sunt, eveniet cumque provident a quod quisquam aliquid obcaecati repellendus optio id. Quasi.</p>
            <a class="btn btn-outline-dark">CTA Button</a>
            <!-- END: Section Content -->
          </div>
        </div>
  
      </div>
    </div>
    <div class="section-overlay"></div>
  </section>
  
  	
  

Right Aligned Content

  	
  		<section class="rbn-bg-section text-bg-light" style="--rbn-bgimg-sm: url('../img/fpo/fpo-image-4-3.jpg'); --rbn-bgimg-lg: url('../img/fpo/fpo-image-16-9-l.jpg');">
    <div class="container-xxl">
      <div class="row rbn-section-space justify-content-end min-vh-90">
  
        <div class="col-lg-6 col-xxl-4 d-flex">
          <div class="section-content-end">
            <!-- BEGIN: Section Content -->
            <h2>Section Title</h2>
            <p>Ipsa blanditiis nihil commodi eligendi veritatis nam aliquam asperiores. Debitis, impedit doloribus earum, deleniti rerum voluptatem nemo sunt, eveniet cumque provident a quod quisquam aliquid obcaecati repellendus optio id. Quasi.</p>
            <a class="btn btn-primary mt-auto">CTA Button</a>
            <!-- END: Section Content -->
          </div>
        </div>
  
      </div>
    </div>
    <div class="section-overlay"></div>
  </section>
  
  	
  

Optional dark content area

  	
  		<section class="rbn-bg-section text-bg-dark" style="--rbn-bgimg-sm: url('../img/fpo/fpo-image-4-3-dark.jpg'); --rbn-bgimg-lg: url('../img/fpo/fpo-image-16-9-dark.jpg');">
    <div class="container-xxl">
      <div class="row rbn-section-space justify-content-center min-vh-90">
  
        <div class="col-lg-8 d-flex">
          <div class="section-content-center">
            <!-- BEGIN: Section Content -->
            <h2>Section Title</h2>
            <p>Quis, ex, qui modi quibusdam architecto eligendi, sed perspiciatis voluptatem vitae incidunt repellat ut! Ut, optio aperiam ab maxime! Saepe.</p>
            <a class="btn btn-primary">CTA Button</a>
            <!-- END: Section Content -->
          </div>
        </div>
  
      </div>
    </div>
    <div class="section-overlay"></div>
  </section>