Bootstrap 5 Modern Backgrounds

Plug 'n play modern background made with Bootstrap, CSS variables and plain CSS. 
Just copy and paste into your next gig.

How to Use

All these backgrounds got whipped up with some divs, Bootstrap classes and variables, and some CSS lines.


  • Position-Relative
    A parent div holding the bg needs to be rocking that position-relative class. 
  • Overflow-hidden (Optional)
    But the overflow-hidden class might save you from some sideways scroll action on certain backgrounds.

Usage Example:

Whole page vibe:

If you're aiming to have the background take over the entire page, switch from position-absolute to position-fixed to lock that background in place across the whole scene. 

Code example:

<div class="position-fixed top-0 end-0 bg-white h-100 w-100" style="background-image: linear-gradient(to right, rgba(var(--bs-primary-rgb),.2) 1px, transparent 1px), linear-gradient(to bottom, rgba(var(--bs-primary-rgb),.2) 1px, transparent 1px);background-size: 6rem 4rem;"></div>

Another example with purple shades and grid.

Code example:

<div class="position-absolute start-0 top-0 w-100 h-100" style="background: radial-gradient(125% 125% at 50% 10%, black 50%, purple 100%);"></div>
<div class="position-absolute top-0 start-0 h-100 w-100" style="background-image: linear-gradient(90deg, rgba(var(--bs-body-color-rgb), .2) 1px,transparent 0),linear-gradient(180deg, rgba(var(--bs-body-color-rgb), .2) 1px,transparent 0); background-size:1rem 1rem"></div>

Just one Section:  

Like mentioned before, just toss in the position-relative class to keep your background neatly within the lines.