# DAY13 - background 移動設定 / 簡寫(!)

### 假設今天有一區塊如下:

.box {
  width: 400px;
  height: 500px;
  background-color: #004466;
  background-image: url("../img/logo.png");
  background-repeat: no-repeat;
}


### 如何移動 logo ? / background-position 語法

- 主要需要了解到: 第1個數值 x軸
第2個數值 y軸

- 其他的單位: `px % 方向性`（`top、right、bottom、left`）等。

.box {
    // 設定方式: x軸 , y軸:
  background-position: center center;
}


### 如何將 background 多種屬性寫成一行?

- 如下，這是上面完成的範例語法。
我們可以透過簡寫的方式，來完成。

.box {
  width: 400px;
  height: 500px;
  background-color: #004466;
  background-image: url("../img/logo.png");
  background-repeat: no-repeat;
}

- 改成: (p.s background 屬性的撰寫順序，沒有差! 看個人習慣填寫就行。)

.box {
  width: 400px;
  height: 500px;
  /* 背景顏色、目標圖片、是否 repeat?、設定圖片位置: xy */
  /* 請記得! 值與值之間，請使用空白不用加上標點符號。  */
  background: #004466 url("../img/logo.png") no-repeat center center;
}

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