- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Adding Multiple Backgrounds with CSS3
To add multiple backgrounds, use the background-image property in CSS. Following is the code for adding multiple backgrounds −
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
background-image:
url("http://pngimg.com/uploads/autumn_leaves/autumn_leaves_PNG3613.png"),
url("https://i.picsum.photos/id/256/1200/300.jpg");
background-position: left bottom, left top;
background-repeat: repeat, repeat;
padding: 15px;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>Multiple Backgrounds using CSS</h1>
<div>
<h1>Some Sample Text</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ipsum
dolorem? Adipisci accusantium eveniet necessitatibus beatae est, dolorum
nobis minima aliquam atque id at sapiente culpa, alias nulla rem.
Aliquam, modi repellendus fugiat dolore, blanditiis praesentium quam
doloribus possimus doloremque reprehenderit corporis enim distinctio,
ducimus nisi. Voluptatum vel repudiandae omnis.
</p>
</div>
</body>
</html>Output
The above code will produce the following output −
Updated on 11-May-2020 10:12:06
- Related Questions & Answers
- Adding CSS3 Border Images
- Adding Drop Shadow to Images using CSS3
- Performing multiple transitions using CSS3
- Configure tkinter/ttk widgets with transparent backgrounds
- Media queries with CSS3
- Adding multiple views in SAP HANA Analytic Privilege
- Working with CSS3 Filter Effects
- Extending User Interface with CSS3
- Adding a legend to a Matplotlib boxplot with multiple plots on the same axis
- How to Use Images as Backgrounds in Tkinter?
- Z-axis 3D transform with CSS3
- Y-axis 3D transform with CSS3
- X-axis 3D transform with CSS3
- Methods of 3D transforms with CSS3
- CSS3 Box Width with Box-Sizing
Advertisements