Background Image Bootstrap

Example

How to Add a Background Image with Bootstrap?

A simple full-page background image would look like this. Look at other sections of these documents if you require a backdrop image with various parameters.

• Using inline CSS, add a background picture.
• Set the height of the background. The term "viewport height" (height: 100vh implies 100% of available height) is used in the example below.
• To appropriately size the image and ensure responsiveness, add the .bg-image class.

How it works?

By adding a single line of CSS, you can quickly set the background picture for each HTML element: style="background-image: url('');

We must include a link to our image inside the url('').

The path must look like the following if you wish to utilize the image on your computer:

Additionally, you have the option of adding a link to the image from the Internet using an absolute path.

The HTML element only needs to have this CSS line added at that point.

Let's add height: 400px; to set a height.

Now it works ... partially. We see the picture, but it is cut and unsightly.

Fortunately, MDBootstrap has a class that resolves this problem. Add .bg-image to the class, and the problem appears to go away.

Full Page Background Image

Now that the space is available, it will be simple to make this background image a full-page one.

Substitute height: 100vh for height: 400px.

The term "viewport height" is used.

height: 100vh, or 100% of the height that is readily available.

Half Page Background Image

The background image can easily be extended to fill a half page (or any other proportion). Simply substitute "height: 50vh" with "height: 100vh".

This is a very useful design that is often used in many landing pages.

Jumbotron with Background Image

Although there isn't a specific jumbotron component in Bootstrap 5, this isn't a problem. Using the supplied classes, you can quickly design your own component.

Cards with Background Image

We can easily make cards with a picture in the background using the same method as the jumbotron.

Centering content

Content alignment is crucial when utilizing components with backdrop pictures. Most of the time, we must vertically and horizontally center the material. Flexbox is the ideal tool to utilize for this.

To enable flexbox, add .d-flex to the background image. To align text horizontally, add .justify-content-center, and to align items vertically, add .align-items-center.

Visit our Flexbox docs to find out more information about flexbox. To configure the desired flexbox settings, you may also utilize our Flexbox generator.

Masks

It's common for the backdrop image to have enough contrast on its own to make the message plainly apparent. We utilize masks because of this.

Masks change an element's visibility by hiding it entirely or partially. By creating the right contrast, masks are utilized to increase content visibility.

Visit our Masks documents to find out more information on masks. To build the desired mask, you may also use our Masks generator.

How it works:

1. Masks require a .bg-image wrapper that centers the picture correctly and sets the image's position to relative and hidden for overflow.
2. We insert an img element with the source link within the .bg-image wrapper as its first child.
3. The genuine mask is shown below. Using rgba code and inline CSS, we can set a color and opacity.
4. You must include the text inside the .mask wrapper if you wish to add text to the image. You must utilize flex utilities to center it.

By manipulating RGBA code you can change the color and opacity of the mask.

Gradients

Additionally, you may apply amazing gradients to the background image using our gradient generator.