How to set background image in bootstrap

How to set the background image in bootstrap to automatically adapt

Browser: chrome

Use CSS: bootstrap (this may affect our css settings, so I still mention it)

In the process of setting background images, I often encounter that the background image cannot automatically adapt to the screen as I want, and I do the same. After trying many methods, I found a setting that works for my situation.

The code is as follows:

body {
  background-image: url("../images/backgroundImg2.jpg");
  background-position: center 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
}

In this way, the background image of the body can be successfully set to automatically adapt to the screen.

However, I have not confirmed whether other browsers are compatible. It is currently available on Chrome.

Related properties:

The background-image property sets the background image for the element. The background of an

element occupies the entire size of the element, including padding and borders, but not margins.

By default, the background image is placed in the upper left corner of the element and repeats horizontally and vertically.

Tip: Please set an available background color so that the page can get good visual effects even if the background image is not available.

Related recommendations: "bootstrap tutorial"

The above is the detailed content of How to set background image in bootstrap. For more information, please follow other related articles on the PHP Chinese website!