先在HTML設定，撐出高度。

	<div class="element">
		<p>#從零開始：background-image的特性以及怎麼用?</p>
	</div>

接著來看看如何使用background-image

1. 基本用法

.element {
  background-image: url('image.jpg');
}

2. 加入多張背景

.element {
  background-image: url('image1.jpg'), url('image2.jpg');
}

3. 設定背景大小及位置

可以使用像素、百分比或關鍵字（如cover和contain）來設定大小。

.element {
  background-image: url('image.jpg');
  background-size: cover; /* 或 background-size: 100% 100%; */
}

background-position屬性用於控制圖片在元素內的位置。可以使用關鍵字(center、top、left、right、bottom)、像素(px)、百分比(%)等來定義位置。

.element {
  background-image: url('image.jpg');
  background-position: center top;
}

4. 背景重複

預設情況下，背景圖片會在元素內重複。可以使用background-repeat屬性來設定，如no-repeat、repeat-x和repeat-y。

.element {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
}

以上範例可以參考codepen：https://codepen.io/rochelwang1205/pen/mdaxPEW

參考資料：

1. background-image：https://developer.mozilla.org/en-US/docs/Web/CSS/background-image