CSS3 Multiple background – Tutorials Art

CSS3 Multiple background provides several new properties to manipulate the backgrounds of an element and the option to adjust the background size.CSS3 offers the ability to include multiple background images for a given element

example1 {
  background-image: url(https://www.tutorialsart.com/tryit/media/aaaaaaaa-1.jpg), url(https://www.tutorialsart.com/tryit/media/cat.jpg);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;

CSS3 Multiple Background values

1	background This value is used for setting all the background image properties in one section
2	background-clip This value is used to declare the painting area of the background
3	background-image This value is used to specify the background image
4	background-origin This value is used to specify position of the background images
5	background-size This value is used to specify size of the background images

Size of background

This property is used to accept multiple values for background size (using a comma-separated list), when working with multiple backgrounds.

background-image: url(https://www.tutorialsart.com/tryit/media/aaaaaaaa-1.jpg) left top no-repeat, url(https://www.tutorialsart.com/tryit/media/cat.jpg) right bottom no-repeat, url(https://www.tutorialsart.com/tryit/media/image-4.png) left top repeat;
  padding: 15px;
  background-size: 50px, 130px, auto;