Free HTML Template for - Startup, SaaS, Business, App, and Software Website & Landing Page. Play is 100% Free and Open-source template project that initiated by UIdeck Team.
Bootstrap 5 Background Image
Setting a background image in Bootstrap can seem troublesome, especially for novice web developers. Thanks to this tutorial, you will not only learn how to use this functionality without any problems, but you will also learn advanced tricks that will allow you to create truly amazing projects with unconventional design.
Also, try these ready-to-use templates to see how you can implement the background image in a real project.
This is a basic example of a full-page background image. If you need a background image with different settings have a look at other sections of this docs.
You can easily set the background image in each HTML element by adding a single line of CSS:
Inside of the url('') we need to provide a link to our image.
If you want to use the image on your computer, the path should look like this:
You can also use an absolute path and add a link to the image directly from the Internet.
Then we just need to add this CSS line to the HTML element.
However, despite this, our picture does not appear. Take a look at the demo:
That's because we need to provide a height to this HTML element. Let's add height: 400px; to set a height.
Now it works ... partially. We see the picture, but it is cut and unsightly.
Click on the images to launch the live demo.
Fortunately, there is a class in MDBootstrap that fixes this issue. Just add .bg-image to the class and you will see the problem magically disappear.
Jumbotron with background image
In bootstrap 5 there is no dedicated jumbotron component, but it's not a problem at all. You can easily create your own component by using available classes.
themesberg/simple-bootstrap-5-dashboard
You can’t perform that action at this time.
Full page background image
Now we can easily make this background image to cover the full available space and make it a full-page background image.
Just replace height: 400px; with height: 100vh;
vh stands for viewport height.
height: 100vh; means 100% of available height.
Note: If you want to stretch the image to the full available height and width remember to use the image with enough high resolution. However, be careful not to overdo it. Heigh-resolution images weigh a lot and can slow down your website.
Cards with background image
Using the same technique as with the jumbotron, we can easily create cards with an image in the background.
An important part of using components with background images is content alignment. In most cases, we need to center the content vertically and horizontally. The best way to do this is to use flexbox.
Add.d-flex to .bg-image to enable flexbox. Then add .justify-content-center to align content horizontally and.align-items-center to align them vertically.
To learn more about flexbox have a look at our Flexbox docs. You can also use our Flexbox generator to set up the desired flexbox settings.
Rarely does the background image alone provide sufficient contrast for the content to be clearly visible. That's why we use masks.
Masks alter the visibility of an element by either partially or fully hiding it. Masks are used to make content more visible by providing a proper contrast.
To learn more about masks have a look at our Masks docs. You can also use our Masks generator to create the desired mask.
By manipulating RGBA code you can change the color and opacity of the mask.
You can also use our Gradient generator to apply stunning gradients to the background image.
I suppose you've heard of the famous Instagram filters. Thanks to our Instagram filter generator you can apply them to your background image.
Are you looking for something even more extravagant? Use our SVG wave generator and apply vector shapes to the background image.
Half page background image
You can also stretch the background image half page (or any other percentage). Just replace "height: 100vh" with "height: 50vh".
This is a very useful design that is often used in many landing pages.
themesberg/volt-bootstrap-5-dashboard
You can’t perform that action at this time.
