Home > Article > Web Front-end > How to make two backgrounds overlap with css
How to make two backgrounds overlap with css
- 藏色散人Original
- 2021-01-12 10:17:313904browse
Css method to overlap two backgrounds: First create an HTML sample file; then use [background-image:url(image address),url(image address);] to overlap the two background images. That’s it.
The operating environment of this tutorial: windows7 system, HTML5&&CSS3 version, Dell G3 computer.
Recommended: css video tutorial
In css, you can use background-image:url (image address), url (image address); to make two backgrounds The pictures are displayed overlappingly.
This way, when you have the idea of blending two shapes into something beautiful, you can get a nice result.
Example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
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;
}
</style>
</head>
<body>
<!-- Your content here -->
</body>
</html>Rendering:
The above is the detailed content of How to make two backgrounds overlap with css. For more information, please follow other related articles on the PHP Chinese website!