Using multiple background in css
Posted By :Himanshu Khurana |31st July 2018
In past, when we need to add multiple background images we need add more classes to achieve the same result.
Like this :
#example1 {
background-image: url("images/demo1.gif");
background-position: right bottom;
}
#example2 {
background-image: url("images/demo2.gif");
background-position: right bottom;
}
#example3 {
background-image: url("images/demo3.gif");
background-position: right bottom;
#example4 {
background-image: url("images/demo4.gif");
background-position: right bottom;
}
CSS3 background property allows you to add multiple background images. This syntax is very easy, you just comma separate them. The following example has two background images, the first image is a demo1 (aligned to the bottom and right) and the second image is a demo2 background (aligned to the top-left corner):
Browser Support :
Multiple backgrounds is supported by all of the main browsers, without the need for vendor prefixes.
You can use like this :
#example1 {
background: url(demo1.gif) right bottom no-repeat, url(demo2.gif) left top repeat;
}
or like this :
#example1 {
background: url(demo1.gif),
url(demo2.gif);
background-repeat: no-repeat,
no-repeat;
background-position: right bottom,
left top;
}
I hope this blog will help for all.
THANKS
Ready to innovate ? Let's get in touch
Follow us
We are ISO 9001:2015 Certified
Resources
Connect with us
Follow us
