Home >Web Front-end >Bootstrap Tutorial >How to set background image in bootstrap

How to set background image in bootstrap

藏色散人
藏色散人Original
2019-07-15 11:19:3922098browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn