How to add a background image with Bootstrap
A background image specifies an image to use as the background of an element. A background image is a great way to add personality and style to web pages. With Bootstrap, we can easily add a background image that changes with the page width. It is extremely practical to use Bootstrap as a library.
Code example
We can add images using the HTML img tag, and Bootstrap will help us make them fit and responsive for different viewport sizes.
Let's see the basic example of adding the background image using Bootstrap.
Line 10: creates a fluid container with no padding (
p-0). It will hold the image.Line 11: adds an image using a
srcattribute. Theimg-fluidclass makes the image responsive, ensuring it scales appropriately to fit the container's width while maintaining its aspect ratio.
In the above example, we have added an image as background. Now, we're going to overlay text on top of it and use this images as a background.
The text-overlay CSS class positions text absolutely within its container, utilizing the top and left properties set to 50% to center it horizontally and vertically. The transform property further adjusts its position to the center precisely. The z-index property ensures the text appears above the background image, and the color property sets the text color to white.
