CSS作為前端基礎，其中的背景顏色和背景圖片也是開發中經常用到的功能。

在HTML中，我們可以使用style屬性來設置元素的背景顏色。

<div style="background-color: #f2f2f2;">
<p>這是一個有背景顏色的div</p>
</div>

上述代碼中，我們使用style屬性定義了一個div元素的背景顏色為#f2f2f2。 當頁面加載時，div將顯示為灰色。

除了使用顏色值來設定背景顏色之外，我們還可以使用RGB值、顏色名或者HEX值來定義背景顏色。

<div style="background-color: rgb(255, 255, 255);">
<p>這是一個設定RGB值背景顏色的div</p>
</div>
<div style="background-color: green;">
<p>這是一個設定顏色名稱背景顏色的div</p>
</div>
<div style="background-color: #87CEFA;">
<p>這是一個設定HEX值背景顏色的div</p>
</div>

相比于背景顏色，使用背景圖片更加方便地能夠實現web頁面的設計效果。下面是一些常用的背景圖片相關樣式

<div style="background-image: url('background.jpg');">
<p>這是一個帶有背景圖片的div</p>
</div>
<div style="background-repeat: repeat;">
<p>這是一個背景圖片平鋪的div</p>
</div>
<div style="background-repeat: no-repeat;">
<p>這是一個背景圖片不進行重復的div</p>
</div>
<div style="background-size: cover;">
<p>這是一個背景圖片完全覆蓋容器的div</p>
</div>
<div style="background-size: contain;">
<p>這是一個容器完全包含背景圖片的div</p>
</div>

上述樣式是用于設置背景圖片的一些常用屬性。 background-image屬性可以指定要使用的背景圖片的位置。 background-repeat屬性指定背景圖片的平鋪方式，可以選擇平鋪或不平鋪。 background-size屬性可以根據需要調整背景圖片的大小。

總的來說，使用CSS設置背景顏色和背景圖片可以輕松地增加web頁面的視覺效果，同時帶來更好的用戶體驗。