hyperの背景に画像を設定する方法

hyperとは

html + css の技術で作られたターミナルアプリ
https://hyper.is/

面白いところ

hyper には ~/.hyper.js という設定ファイルがあるのだが、ファイル拡張子をご覧の通り設定ファイルが JavaScript で書いてある
その設定項目の中に css というセクションがあり、ココに設定されたCSSがそのまま hyper の画面に適用されるようになっている
ここに background-* 系の記述を入れたら、ちゃんと背景への CSS として適用されてしまう

雑なんだか凄いんだか

実際に設定する際は

必要な要素はだいたい下記

• ターミナルの背景色にアルファを指定して透過させる
• ターミナルグループの背景色にアルファを指定して画像を薄く表示する

これと、よく使う background-* 系の CSS プロパティを組み合わせて背景指定すればOK

設定例

.hyper.js

    backgroundColor: 'rgba(39, 79, 79, 0.5)',

    css: `
    .terms_terms{
      background-image:url("file://<<ローカルの背景画像ファイル>>");
      background-size: 50%;
      background-position: right bottom;
      background-repeat: no-repeat;
    };
    .terms_termGroup {
      background: rgba(0,0,0,.5) !important;
    }
    `,

結果

(c) WonderPlanet クラッシュフィーバー

四方山

どうせ atom や vscode とかと同じでプラグイン使わないと背景画像設定できないだろうと思っていたら、設定ファイルで直接CSS弄れる事を後から知って切なくなった

CSS としての background がそのまま使えるので、アニメーション GIF とかも設定できる
※ 自宅の方の hyper は ドアが開かない ぶち破ろうが延々と流れてたりする