Home  >  Article  >  Web Front-end  >  Does css3 support adding multiple background images to web pages?

Does css3 support adding multiple background images to web pages?

青灯夜游
青灯夜游Original
2021-04-06 17:50:433450browse

css3 supports adding multiple background images to web pages. In CSS, you can add multiple background images to a web page by directly specifying multiple background paths in the background-image attribute. The syntax format is "background-image: url (image address), url (image address)...;" .

Does css3 support adding multiple background images to web pages?

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

Using multiple background images in CSS

What if you want to add more than one image to the background? Multiple background paths can be specified directly in CSS3, as shown below:

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;
}

Rendering:

Does css3 support adding multiple background images to web pages?

Full example address: https ://codepen.io/duomly/pen/eYpVoJR

(Learning video sharing: css video tutorial

The above is the detailed content of Does css3 support adding multiple background images to web pages?. 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