---
# System prepended metadata

title: DAY12 - background-color 與 image 的混合使用方式
tags: ['Re:0 前端工程師之路 - HTML CSS 篇章 / 排版-position 篇']

---

# DAY12 - background-color 與 image 的混合使用方式


### 設定一個範圍 - contaiiner

```
<div class="container">
  
</div>
```

### CSS 如下:

- 設定容器寬高，放置目標圖片
- 由於圖片會自動重複填滿容器，請設定: `no-repeat;`
- 設定背景顏色


```
.container {
  background-image: url('https://www.fubonguardians.com/content/img/teams/guardians/logo-500x500.png');
  background-repeat: no-repeat;
  width: 600px;
  height: 600px;
  background-color: #87CEFA;
}
```

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

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