Can I add multiple background images to html?

htmlYou can add multiple background images. In HTML, you can set multiple background images for a container through background-image or background, that is, put different background images into only one block element; the syntax is "background:url(image address),url(address)...; ".

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer. In

html, you can set multiple background images for a container through background-image or background, which means you can put different background images into only one block element.

First let’s take a look at the syntax:

background ： [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-attachment] | [background-position]

Use commas to separate the URLs of multiple background images. If there are multiple background images and only one other attribute (for example There is only one background-repeat), then this attribute value is applied to all background images.

Let’s take a look at an example:

body {
  background-image: url(https://image.flaticon.com/icons/svg/748/748122.svg), url(https://images.unsplash.com/photo-1478719059408-592965723cbc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2212&q=80);
  background-position: center, top;
  background-repeat: repeat, no-repeat;
  background-size: contain, cover;
}

Recommended tutorial: "html video tutorial"

The above is the detailed content of Can I add multiple background images to html?. For more information, please follow other related articles on the PHP Chinese website!