html - How to control multiple images for a single background definition -

In CSS, I'm trying to figure out how the size of 2 different images is controlled individually. Stacked up on each other So in the CSS, any 1 background image can define such as: background: url ('base.png') any repeat center; To stack an overlay on the top of the base image, you can use an approach as fig .

 .my-class {background: url ('overlay.png') No-repeat center, url ('base.png') Any repeat center; Background-shaped: 100% 100%; }  
   Fig    
 However, if I want a slightly different size for each images, then I'm not sure How to do that I imagine that there is a type of inline position and dimension definition, as  fig  but I have not found it very right. Does anyone know how to do this? Thanks in advance.  
 .my-class {background: url ('overlay.png') No-repeat 0/100% 90%, url ('base.png') Any repeat center 0 0/100% 100%; }  
   Fig 2     
 
 
 I think you were using almost CSS. I believe that you can do this:  
  My-class {background: url ('overlay.png') no-repeat center, url ('base.png') Any repeat center; Background size: 90px 80px, 100px 100px; }   
 You need a comma and then set the size of the second background.