看起來意思都是背景的 background / background-image 差別

background:設置背景屬性。
background-image:設定背景圖像。

background 是多種背景屬性的縮寫，也就是說如果不設定其中的一項屬性，也不會出現問題。而 background-image 是 background 其中的一項單個屬性，意思是設定圖片，並不能去使用像是 background-repeat no repeat 的值。

background 概括的屬性如下：

要怎麼選才是我要的? - CSS 多重選擇器

在同一個 HTML 標籤間中，包含兩個 class 名稱，有無空格和分號隔開的差異。
HTML

<div class="one two"></div>

CSS

CSS	class 差別	說明
.one .two{}	中間空格	須要是在 one 裡面的 two，才會被選擇到。
.one.two{}	沒有空格	同時具有 one 和 two 的 class 時，才能被 CSS 所選擇到到。
.one, .two{}	逗號	class 中有 one 或 two，都會被編輯器所選擇到。

line-height：
適用於單行文字置中對齊，透過單行行高的設定，讓一行字所需要佔據的空間分配到文字的上下方。
Absolute/ margin 負值：
利用 top, left 50%，將網頁的物件定位在空間中的頂端與左側的50%位置，但由於是以物件左上角做為定位起始點，最後再使用margin-top：-50%，設定成高度的一半。
Absolute / margin auto：
當物件設定 absolute 後，預設是抓不到整體可運用範圍的，搭配 left/right/top/bottom 這類屬性。使用top/bottom：0的用意在於，讓瀏覽器去計算空間的頂部和底部空間，這時候使用margin:auto 就會生效。缺點是定位物件必須有固定的寬高（％數也可）才能正常置中。
absolute / translate：
物件不需固定寬高，與使用margin 負值同概念。transform: translate(-50%, -50%) 讓物件的X軸移動-50%，50%是以物件本身的寬度作為100%來做計算，所以物件寬度是多少，都會自動跑負一半的位置。
flex/align-items：
設定父層 display: flex ，設定次軸(cross axis)置中屬性 align-items: center，不需設定高度即可置中。