How To Set An Image As The Background In Html

Groundwork Prototype

Bootstrap 5 Groundwork Image

MDB 5 - Bootstrap 5 & Material Design 2.0

Video tutorial

Basic example

This is a basic case of a full-page groundwork prototype. If y'all need a background image with dissimilar settings have a look at other sections of this docs.

Add background-image via inline CSS.
Define the background height. In the example beneath we use vh units, which stands for "viewport acme" (elevation: 100vh means 100% of available height.)
Add together .bg-image grade to scale the image properly and to enable responsiveness

How information technology works

You tin easily set the groundwork image in each HTML element by adding a unmarried line of CSS:

Inside of the url('') nosotros need to provide a link to our paradigm.

If you lot want to use the image on your estimator, the path should look like this:

Path	Description
`img src="picture.webp"`	The "picture.webp" file is located in the same folder equally the current page
`img src="images/picture.webp"`	The "picture show.webp" file is located in the images folder in the current folder
`img src="/images/picture.webp"`	The "pic.webp" file is located in the images folder at the root of the current web
`img src="../picture.webp"`	The "moving-picture show.webp" file is located in the folder one level up from the current folder

You tin can too use an accented path and add a link to the image directly from the Internet.

Then we just need to add this CSS line to the HTML chemical element.

Even so, despite this, our picture does not appear. Accept a look at the demo:

Demo

That's because we need to provide a height to this HTML element. Allow's add height: 400px; to set a height.

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

Click on the images to launch the live demo.

Fortunately, at that place is a form in MDBootstrap that fixes this result. Just add together .bg-image to the form and you will see the problem magically disappear.

Full page background image

At present we can easily make this background image to cover the full bachelor infinite and brand it a full-page background image.

Just supersede peak: 400px; with height: 100vh;

vh stands for viewport meridian.

height: 100vh; means 100% of available height.

Note: If you desire to stretch the image to the full bachelor height and width remember to use the image with enough high resolution. Nonetheless, exist careful not to overdo it. Heigh-resolution images counterbalance a lot and can slow down your website.

Demo

One-half page background prototype

You tin can also stretch the background paradigm half page (or any other per centum). Just replace "height: 100vh" with "superlative: 50vh".

This is a very useful blueprint that is oft used in many landing pages.

Demo

Jumbotron with groundwork paradigm

In bootstrap five there is no defended jumbotron component, but information technology'due south not a problem at all. Yous can hands create your own component by using available classes.

Cards with background paradigm

Using the same technique every bit with the jumbotron, we tin hands create cards with an image in the groundwork.

Centering content

An important part of using components with background images is content alignment. In most cases, we need to centre the content vertically and horizontally. The best way to do this is to use flexbox.

Add together.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 larn more about flexbox have a wait at our Flexbox docs. You lot can as well apply our Flexbox generator to set up the desired flexbox settings.

Masks

Rarely does the background prototype alone provide sufficient contrast for the content to exist conspicuously visible. That'southward why we apply masks.

Masks alter the visibility of an element by either partially or fully hiding it. Masks are used to make content more than visible past providing a proper contrast.

To learn more almost masks have a look at our Masks docs. Yous can besides use our Masks generator to create the desired mask.

How information technology works:

Masks crave .bg-epitome wrapper which sets a position to relative, overflow to subconscious, and properly center the epitome.
The within .bg-image wrapper equally the first child we place an img element with the source link
Below is the actual mask. Nosotros set a color and opacity via rgba code and inline CSS.
If you lot want to put a text on the paradigm you lot have to place it within the .mask wrapper. To center information technology you have to employ flex utilities .