CSS 背景圖設定整理：background-size、位置、固定背景、多重背景與手機注意事項

首頁橫幅、活動區塊常用一張大照片當背景，上面放標題和按鈕。看起來簡單，實際做的時候常遇到：照片被切掉重點、手機上人物頭被裁掉、白字在亮的地方看不到、手機下載一張超大的圖……

這篇把背景圖會用到的 CSS 一次整理，每段都可以直接複製，最後也說明什麼時候不該用背景圖。

基本寫法：鋪滿區塊、不變形

.hero {
  min-height: 60vh;
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

• background-size: cover：照片等比例放大到蓋滿整個區塊，多出來的部分裁掉。照片不會變形，但邊緣一定會被切掉一些。
• background-position: center：裁切時以中間為準，上下左右平均切。
• background-repeat: no-repeat：不要重複鋪。用了 cover 已經會蓋滿，加這行是保險。
• min-height：背景圖不會撐開區塊的高度，區塊裡沒有內容的話高度是 0，什麼都看不到。一定要給高度，或放進足夠的內容。

同樣的設定可以縮成一行，斜線後面是大小：

.hero {
  background: url("hero.jpg") center / cover no-repeat;
}

cover 和 contain 怎麼選

.product-box {
  aspect-ratio: 4 / 3;
  background: #f4f6f6 url("product.png") center / contain no-repeat;
}

• cover 是「填滿，可能裁切」，適合風景、氣氛照這類切掉邊緣也沒關係的照片。
• contain 是「完整顯示，可能留白」，適合 Logo、商品去背圖這種不能被切到的圖。留白的地方用背景色補上，例子裡的 #f4f6f6 就是。
• 也可以直接寫尺寸，例如 background-size: 300px auto（寬 300px、高等比例）。

照片重點不在中間：調整位置

人物在照片右邊，center 一裁，手機上可能只剩背景。用百分比指定「要保留的重點在哪裡」：

.hero-person {
  background: url("hero.jpg") 75% 30% / cover no-repeat;
}

75% 30% 的意思是：照片上「從左邊算 75%、從上面算 30%」的那一點，會對齊到區塊「從左邊 75%、從上面 30%」的位置。簡單記：重點在照片哪裡，就寫那裡的百分比，裁切時那一帶會盡量留住。

也可以寫成 right 20% top 10%，意思是離右邊 20%、離上面 10%。

重複的小圖案

.dot-pattern {
  background-color: #f4f6f6;
  background-image: url("dot.png");
  background-repeat: repeat;
  background-size: 40px 40px;
}

一張 40×40 的小圖重複鋪滿，做成圓點、格紋底。只想橫向重複寫 repeat-x，直向寫 repeat-y。

白字看不清楚：加一層深色遮罩

背景可以疊好幾層，先寫的在上面。在照片上面疊一層半透明的深色，白字就清楚了：

.hero-dark {
  background:
    linear-gradient(rgb(0 0 0 / 45%), rgb(0 0 0 / 45%)),
    url("hero.jpg") center / cover no-repeat;
  color: #fff;
}

linear-gradient 兩個顏色一樣，就是一整片半透明的黑。想要上淺下深，讓下方的文字更清楚，改成 linear-gradient(rgb(0 0 0 / 10%), rgb(0 0 0 / 60%))。

比起在文字加陰影，整片遮罩穩定很多，照片再花都看得清楚。文字陰影的寫法可以看CSS 文字陰影、發光、描邊怎麼寫。

固定背景（視差效果）：iPhone 上沒有作用

.hero-fixed {
  background: url("hero.jpg") center / cover no-repeat;
  background-attachment: fixed;
}

fixed 讓背景固定在畫面上，往下捲動時內容在動、背景不動，看起來像有景深。要注意：

• iPhone、iPad 的 Safari 不支援。瀏覽器看得懂這行，但不會有任何效果，背景就跟著內容一起捲動（caniuse 的資料到 iOS 27 都還是這樣）。所以設計時不能把重點放在這個效果上。
• cover 的尺寸改成以整個畫面計算，不是以區塊計算。區塊比畫面小的話，看到的只是放大後照片的一小部分，常常和預期的構圖不一樣。
• 捲動時瀏覽器要一直重畫背景，比較舊的手機會卡。

想讓開了「減少動態效果」的人看到一般背景：

@media (prefers-reduced-motion: reduce) {
  .hero-fixed {
    background-attachment: scroll;
  }
}

手機換一張小圖

電腦版橫幅常常是 1600px 寬的大圖，手機螢幕用不到這麼大。用 media query 讓手機載入另一張比較小、比例也適合直式畫面的圖：

.hero-responsive {
  min-height: 60vh;
  background: url("hero-mobile.jpg") center / cover no-repeat;
}

@media (min-width: 768px) {
  .hero-responsive {
    background-image: url("hero-desktop.jpg");
  }
}

這裡是先寫手機版，再用 min-width 換成電腦版的圖。實際用 390px 寬測試，瀏覽器只下載了手機版那張；1280px 寬只下載電腦版那張，不會兩張都下載。手機版的圖可以裁成直一點的比例，人物才不會被切得只剩半張臉。

用 WebP 格式的背景圖

WebP 通常比 JPG 小很多。image-set() 可以讓支援的瀏覽器用 WebP，不支援的用 JPG：

.hero-webp {
  background-image: url("hero.jpg");
  background-image: image-set(
    url("hero.webp") type("image/webp"),
    url("hero.jpg") type("image/jpeg")
  );
  background-size: cover;
  background-position: center;
}

第一行是給完全不認得 image-set() 的舊瀏覽器用的，看不懂第二行就會停在第一行。測試的 Chrome 只下載了 hero.webp，沒有下載 JPG。

什麼時候不要用背景圖

背景圖適合裝飾，不適合內容：

• 背景圖沒有替代文字（alt）。看不到圖的人（例如用螢幕報讀軟體的人）不會知道它是什麼，搜尋引擎也比較難把它當成這一頁的圖片。商品照、作品照、說明圖，請用 <img>。
• 背景圖不會延遲載入。頁面下方很多張背景圖，一打開網頁就全部開始下載；<img loading="lazy"> 可以等捲到附近才載入。
• 想要 <img> 也像 cover 一樣裁切填滿，用 object-fit: cover，做法請看CSS 圖片填滿 div 不變形。

WordPress 的「封面」區塊

WordPress 的「封面」區塊做橫幅很方便。我們在測試站看了它輸出的 HTML：

• 一般情況下，照片是用 <img> 放的，再用 CSS 裁切填滿，可以設替代文字。放在頁面最上面的那張，WordPress 還會自動標成優先下載。
• 打開區塊設定裡的「背景固定位置」，照片就改成 CSS 背景圖，iPhone 上一樣沒有固定的效果。

所以封面區塊除非真的需要固定背景，維持預設就好。

延伸閱讀

• CSS 圖片填滿 div 不變形：object-fit: cover 用法與固定比例寫法
• CSS 文字陰影、發光、描邊怎麼寫？text-shadow 與 text-stroke 常用效果整理
• RWD 響應式網頁怎麼做？viewport 語法與 CSS 基本寫法完整教學

首頁橫幅是客人對網站的第一印象，照片怎麼裁、手機怎麼顯示、速度快不快，都會影響要不要繼續看下去。正威網路行銷是 25 年經驗的基隆網頁設計工作室，手機和電腦版都會分別調整，台北與全台客戶也歡迎來聊聊。