vscode-backgroundの`background.style`設定について

VSCodeの背景画像を変更する[vscode-background](https://marketplace.visualstudio.com/items?itemName=shalldie.background)という拡張機能の設定がちょっと使いにくいので、それについてのメモ。

## 概要
下のように、`background-size`を追加して`opacity`を調整すれば大体okだと思います。vscode-backgroundはvscodeのテキスト入力部分の`div`要素に`::after`要素を追加して、そこに`background-image`でかわいい画像を表示させています。`settings.json`の`background.style`はこの`::after`部分に適用されますので、そのつもりで編集をしましょう。

```json
    "background.useDefault": false,
    "background.customImages": [
    "path_to_image"
    ],
    "background.style": {
        "content": "''",
        "pointer-events": "none",
        "position": "absolute",
        "z-index": "99999",
        "width": "100%",
        "height": "100%",
        "background-position": "100% 100%",
        "background-repeat": "no-repeat",
        "background-size": "50%",
        "opacity": 0.3
    }
```

<img width="1065" alt="スクリーンショット 2017-07-07 11.05.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/189672/5006c05f-6166-ef59-971d-42ef1e5510cc.png">

<img width="326" alt="スクリーンショット 2017-07-07 11.05.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/189672/71f0adc2-5a11-07db-18b0-0fdd83887a9a.png">

## 背景
最近AtomからVSCodeに乗り換えました。Atomでは[高槻やよいさん](http://765pro.jp/idol/yayoi.html)を背景に表示して作業をしていたので、VSCodeでも同じことをしたいと思いました。[vscode-background](https://marketplace.visualstudio.com/items?itemName=shalldie.background)を利用しましたが、cssの設定が少しわかりにくく、15分程時間を使ったのでここにまとめておきます。

## vscode-background の紹介

vscode-backgroundはとても良い拡張機能です。拡張機能の説明ページにもある通り、3つのpaneにそれぞれかわいい画像を割り当ててVSCodeを可愛くできます。

![](https://github.com/shalldie/vscode-background/raw/master/gif/show.gif)

## vscode-background の設定について

以下の設定が`settings.json`に追加されているのでこれを編集します。
`background.customImages`にかわいい画像のパスを追加し、`background.useDefault`を`False`にするとかわいい画像が表示されます。

```json
// Plugin background enabled.background 插件是否启用
  "background.enabled": true,

  // If use front image,which means image is placed on the top of your code. 是否使用前景图，这样会使图片放在代码的顶部
  "background.useFront": true,

  // Custom style.自定义样式.
  "background.style": {
    "content": "''",
    "pointer-events": "none",
    "position": "absolute",
    "z-index": "99999",
    "width": "100%",
    "height": "100%",
    "background-position": "100% 100%",
    "background-repeat": "no-repeat",
    "opacity": 1
  },

  // Use default images.使用默认图片
  "background.useDefault": true,

  // Your custom Images(Max length is 3). 自己定制背景图，最多3个
  "background.customImages": [],
```

`background.style`を編集せずに画像を設定すると、画像サイズ如何では下のようにかわいい画像がめいっぱい表示されるエディタになります。いいことですが、作業ができないので修正したい。

<img width="400" alt="スクリーンショット 2017-07-07 11.29.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/189672/67ac56da-75d4-1be6-8d72-15ba3371a821.png">

ここで、とりあえず`width`と`height`やな！と考えて`"width":"50%"`のように変更すると、下のようになります。変態みたいになりました。

<img width="400" alt="スクリーンショット 2017-07-07 11.32.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/189672/43e9615a-66bd-115a-39cc-3d4800af7695.png">

`"content": "''"`の記述からも予想がつく通り、この拡張機能はテキスト入力部分に[`::after`要素](https://developer.mozilla.org/ja/docs/Web/CSS/::after)を追加してそこにかわいい画像を表示しているようです。そのつもりでstyleを編集しましょう。
[このあたり](http://www.htmq.com/css3/background-size.shtml)を参考に、`background-size`を設定してあげれば良いでしょう。`opacity`もついでに設定してあげれば作業中にそこはかとなくかわいい感じになると思います。

<img width="400" alt="スクリーンショット 2017-07-07 11.37.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/189672/a5e72776-cae9-a4a0-d3e8-e4d59ec51c59.png">

```json
    "background.style": {
        "content": "''",
        "pointer-events": "none",
        "position": "absolute",
        "z-index": "99999",
        "width": "100%",
        "height": "100%",
        "background-position": "100% 100%",
        "background-repeat": "no-repeat",
        "background-size": "50%",
        "opacity": 0.3
    }
```

## 最後に

背景として利用している高槻さんの画像をいつどこで手に入れたのか定かでないため、出典がわからずリンクを貼れていません。作者の方に申し訳ないので、出典ご存知の方がいらっしゃいましたら教えていただきたいです。