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

How to add background image to bootstrap

Release: 2019-07-27 14:13:50
Original
17335 people have browsed it

How to add background image to bootstrap

There are two ways for bootstrap to add images to web pages:

One is: through The tag is inserted directly into the html

The other is: add it through the css background attribute

Recommendation:How to set the background in bootstrap Image adaptive screen size

Centering method: horizontally centered text-align:center and margin:0 auto

Overview

# There are 5 main background properties in ##CSS2, they are:

* background-color: Specifies the color of the filled background.

* background-image: Reference the image as the background.

* background-position: Specify the position of the element's background image.

* background-repeat: Determines whether to repeat the background image.

* background-attachment: Determines whether the background image scrolls with the page.

Multiple backgrounds

New properties: background-clip

New properties: background-origin

New properties: background Size (background-size)

New properties: (background-break)

Improvement of background color (background-color)

Background tile (background-repeat) Improvement

Improvement of background-attachment

New attribute: background-origin

This attribute is used in conjunction with background-position. Background-position can be calculated starting from the border, padding or content box (similar to background-clip).

* background-origin: border-box;

Start calculating the background-position with the border as the origin.
* background-origin: padding-box;
Start calculating the background with the inner padding as the origin. -position
* background-origin: content-box;
Start calculating background-position with the content box as the origin
For background-clip and background-origin

Related recommendations:

Bootstrap introductory tutorial

The above is the detailed content of How to add background image to 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