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

Requirements: 

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