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


About Author

Himanshu Khurana

Himanshu is an experienced Frontend developer with experience and capabilities to build compelling UI's for Web and Mobile Applications. Himanshu likes playing cricket and listening music.

Request For Proposal

Sending message..

Ready to innovate ? Let's get in touch

Chat With Us