css background 簡寫的排序是這樣：

background: color image attachment repeat poition / size

ex:

background: url("amos.png") no-repeat center

background: url("amos.png") no-repeat center / cover;

background: gray url("amos.png") scroll no-repeat 50% 50% / 50% 50%;

詳細可見大大文章：
Background - 金魚都能懂的CSS必學屬性 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

常用參數

.my-image {
  background-image: url("../image.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */

  background-position: center; 
  background-repeat: no-repeat; 

  background-size: cover;  /* 以最短邊為主，填滿整個畫面，並將多餘的切掉*/

	background-size: contain; /* 不會被裁切，可以看到整張圖面，等同於下面的效果 */
	background-size: 100% auto; /* 寬是全長，高隨意 auto */
}

• url( )
• linear-gradient( )
• radial-gradient( )
• repeating-linear-gradient( )
• repeating-radial-gradient()
• Inital
• Inherit

想同時在一個元素上用 background-image 跟 background-color 要怎麼用

解法 1: 用偽元素

<div class="block">
 ....
</div>

.block{
  background-image: url('img.jpg') no-repeat;
  position: relative;
}

.block::before{
  background-color: rgba(0, 0, 0, 0.37);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
}

解法2：用 linear-gradient 來填實心背景色 (推薦做法)

you can do a trick using linear-gradient like this:

background-image: url('images/checked.png'), linear-gradient(to right, #6DB3F2, #6DB3F2);