---
# System prepended metadata

title: DAY12 - background-image 相關教學 - repeat & no-repeat
tags: ['Re:0 前端工程師之路 - HTML CSS 篇章 / 排版-position 篇']

---

# DAY12 - background-image 相關教學 - repeat & no-repeat

### 插入圖片的另外一種方式:

- 一般來說，在 HTML 插入圖片，可以使用 `img` tag

```
 <img src="" alt="">
```

### background 屬性，也是可以插入圖片的:

- 假設，我使用了一張寬高如下的 logo 圖檔

![](https://i.imgur.com/AYpwGza.png)


```
  width: 224px;
  height: 50px;
```

- 使用 background-image 方式插入:

- 預測長寬皆為 300px 顯示:

```
.box {
  width: 300px;
  height: 300px;
  background-image: url(../img/logo.png);
}
```

### 為啥跑出一堆 repeat 圖片了?

- 由於 background-image 特性包含了一個屬性:
  `background-repeat`，此特性會自動以原本圖片 size
  以重複性質的方式來填滿這個 div，也就是上面的 300px
  
- 要解決這樣的方法有2種:

1. 直接針對 `width`、`height` 設定原本圖片 100%的大小。
2. 設定 `repeat `屬性

```
.box {
  width: 300px;
  height: 300px;
  background-image: url(../img/logo.png);
  //可使圖片不重複: 
  
  background-repeat: no-repeat;
}
```

### 圖片不重複了，但長寬仍不變:

![](https://i.imgur.com/b8oyxO1.png)


### 使用 repeat 的時機:

- 例如我上網找了一個 guardians logo，
  先設定 `.box` 長寬
  並套用 `url('')`
  
```
.box {
  width: 1200px;
  height: 500px;
  background-image: url("data:image/png;base64,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");
}
```  
![](https://i.imgur.com/9G81kUk.jpg)

- 簡單的圖片，瞬間可變成網頁 body 的背景了


###### tags: `Re:0 前端工程師之路 - HTML CSS 篇章 / 排版-position 篇`