{"id":16072,"date":"2013-01-11T18:01:28","date_gmt":"2013-01-11T10:01:28","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=16072"},"modified":"2024-07-19T02:05:37","modified_gmt":"2024-07-18T18:05:37","slug":"css3-multiple-backgrounds","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-multiple-backgrounds\/","title":{"rendered":"A Simple Guide to Using CSS3 Multiple Backgrounds"},"content":{"rendered":"

Adding a background image with CSS<\/a> is nothing new; this feature has been available since the beginning. However, we were limited to adding only one image in a single declaration block. Now, CSS3<\/a> raises the stakes by providing the option of adding multiple backgrounds.<\/p>\n

How to Use Multiple Backgrounds in CSS3<\/h2>\n

In the past, to add more than one background image, we had to modify the HTML structure and add more classes to achieve the desired result through CSS, something like this:<\/p>\n

\r\n.overcast1 {\r\n  background-image: url(\"images\/overcast.png\");\r\n  background-position: 150px 25px;\r\n}\r\n.rainbow {\r\n  background-image: url(\"images\/rainbow.png\");\r\n  background-position: 200px 10px;\r\n}\r\n.overcast2 {\r\n  background-image: url(\"images\/overcast.png\");\r\n  background-position: 250px 25px;\r\n}\r\n.sunny {\r\n  background-image: url(\"images\/sunny.png\");\r\n  background-position: 100px 10px; \r\n}\r\n<\/pre>\n
The code above is clearly redundant. In CSS3<\/strong>, this can be simplified into a single background-image<\/code> property, as shown below:<\/p>\n
\r\n.weather {\r\n  width: 500px;\r\n  height: 280px;\r\n  margin: 50px auto;\r\n  background-image: url(\"images\/overcast.png\"),\r\n                    url(\"images\/rainbow.png\"), \r\n                    url(\"images\/overcast.png\"), \r\n                    url(\"images\/sunny.png\");\r\n  background-position: 150px 25px, \r\n                       200px 10px, \r\n                       250px 25px, \r\n                       100px 10px;\r\n  background-repeat: no-repeat;\r\n}\r\n<\/pre>\n
In this example, we added the same four images with different positions, resulting in a stunning effect.<\/p>\n
\"CSS3<\/figure>\n
<\/i>  View demo <\/span><\/a><\/p>\n
Adding Animation Effects<\/h2>\n
We can make the result even more impressive by adding CSS3 Animations<\/strong><\/a>. To keep the coding simple, we will use only the standard syntax from W3C. However, keep in mind that browsers like IE9, Firefox, Opera, Chrome, and Safari still need their respective prefixes for this to work correctly.<\/p>\n
\n\t\t\t\t\tHow to Advanced Marquee Effect with CSS3 Animation<\/span><\/a>\n
\n\t\t\t\t\t\t\t