Background Image Section
Full width content section with image background
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
Default example: section height is dictated by the content within the content area.
<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
View in new window to see minimum height effect.
<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
View in new window to see minimum height effect.
<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
Applies dark background with white text to 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>