How can I add a background image to a Bootstrap 5 section with text overlay?

Asked on Jun 01, 2025

1 Answer

To add a background image to a section in Bootstrap 5 with a text overlay, you can use a combination of Bootstrap's utility classes and custom CSS. Here's a simple example:

<!-- BEGIN COPY / PASTE -->
        <div class="bg-image text-white text-center" style="background-image: url('your-image-url.jpg'); height: 300px; background-size: cover; background-position: center;">
            <div class="d-flex h-100 align-items-center justify-content-center">
                <h1>Your Text Overlay</h1>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

Replace 'your-image-url.jpg' with the actual URL of your background image.
The `bg-image` class is custom and used for demonstration; you can replace it with any class name you prefer.
The `text-white` class ensures the text is readable against the background.
The `d-flex`, `align-items-center`, and `justify-content-center` classes are used to center the text both vertically and horizontally.
Adjust the `height` in the inline style to fit your design needs.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions