
- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursors
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS Advanced
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
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 −
- Related Articles
- Adding CSS3 Border Images
- Adding Drop Shadow to Images using CSS3
- Configure tkinter/ttk widgets with transparent backgrounds
- Performing multiple transitions using CSS3
- Media queries with CSS3
- Adding multiple views in SAP HANA Analytic Privilege
- Adding a legend to a Matplotlib boxplot with multiple plots on the same axis
- Working with CSS3 Filter Effects
- Extending User Interface with CSS3
- 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