how to style multiple background images on an element

multiple backgrounds

/* assuming you have images named background1.jpg, background2.jpg in your assets/images folder

   set a height so that the image can be seen using 'height' 

   'background-image' takes url(path/to/image.ext), url(path/to/image.ext) .. as many as you want 
   MDN entry: https://developer.mozilla.org/en-US/docs/CSS/background-image 
  
  'background-position' takes url(path/to/image.ext), url(path/to/image.ext) .. as many as you want 
   MDN entry: https://developer.mozilla.org/en-US/docs/CSS/background-position */

.container {
  height: 250px;  /* make this the height of the image */
  background-image: url(/assets/images/background1.jpg), url(/assets/images/background2.jpg);
  background-position: center bottom, left top; /* you can position each image, separated by a comma */
  background-repeat: no-repeat, repeat; /*you can choose to repeat each image too, separated by a comma */
}

do i put this in the new custom.css file?

yup. exactly!