CSS | Background-image

1. 說明
   1. Background-Size
   2. Backgroun-Position
   3. Background-Repeat
2. 從迷離阿拉伯中看見多拿滋

---

整理如何使用 Backgroun-image 用於豐富元素的視覺呈現，同時結合說明 repeat 與 position 的方式控制圖片在元素的背景呈現方式，並結合說明 linear-gradient 的方式調整漸層呈現。

說明

.bg-img {
  height: 400px;  
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("/assets/Unsplash-People.jpg")
}

Background-Size

background-size: contain;

background-size: cover;

background-size: 50%;

Backgroun-Position

background-position: top;

background-position: bottom;

background-position: left;

background-position: right;

Background-Repeat

background-repeat: space;

background-repeat: repeat;

background-repeat: round;

從迷離阿拉伯中看見多拿滋

.bg-img-artifact {
  height: 500px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  background-image: 
    linear-gradient(
      to right bottom, 
      rgba(235, 151, 78, 0.35),
      rgba(235, 151, 78, 0.95)
    ),
    url("/assets/Unsplash-People.jpg")
}