How to set background image in bootstrap

藏色散人
Release: 2019-07-22 13:32:43
Original
22054 people have browsed it

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;
}
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template