背景画像の「サイズ調整」「リピート」「位置調整」が新たに追加されました！

新機能として、背景画像の

• サイズ調整 (background-size)

• リピート (background-repeat)

• 位置調整 (background-position)

が本日新たに追加されました！
これでより柔軟なデザインがSTUDIOで作成可能になります。

画像タブを選択すると、右側に3つの新しい機能「サイズ調整」「リピート」「位置調整」が表示されそれぞれの項目を設定できます。
※今回新たに追加した機能は、画像をBoxモードとして設定した時のみ使用可能です。

画像サイズ調整

この機能は主に背景画像のサイズを指定する際や、画像を切り取って一部の表示にしたい際に使用します。画像のサイズ調整方法は4パターンです。

cover : Boxサイズの縦横比は保持して、背景領域を完全に覆う最小サイズになる
contain : Boxサイズの縦横比は保持して、背景領域に収まる最大サイズになる
px : 画像の比率は変えずに横幅の指定ができる
% : 背景領域に対する背景画像の幅をパーセンテージで指定することができる

cover

coverはBoxサイズの縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小します。

Boxサイズを横幅100%にして「cover」に設定すると、簡単に画像を画面幅最大に設定することができます。

contain

containは画像の縦横比は保持して、背景領域に収まる最大サイズになるように画像を拡大縮小します。

px

pxは画像の比率は変えずに横幅の指定ができます。

親ボックスがBoxのサイズになり、子ボックスの画像のサイズが指定できるため、親ボックスよりも大きい場合は、画像のはみ出た部分は切り取られて表示されます。

%

背景領域に対する画像の幅をパーセンテージで指定することができます。

レスポンシブデザインの対応にはパーセンテージを使うと、デバイスの横幅に合わせて画像サイズの比率が変わるので便利です。

背景画像のリピート機能

画像をタイルのようにリピートをして全体に並べたい場合に活用できる機能です。
画像ボックスの「リピート」を選択すると、画像ボックスの余白の部分を画像が全面に繰り返し表示することができます。デフォルトでリピートモードがオンの状態になっております。

背景画像の位置調整

画像の起点位置を調整できます。

デフォルトで中央を基準に配置されますが、画像ボックスの「ポジション」から位置調整をすると、画像の基点を中央、上下左右、四隅のいずれかに変更できます。

Boxモードの画像編集機能に新しく追加された、「サイズ調整」「リピート」「位置調整」を使って、今までできなかったテクスチャ制作や好みの背景画像のサイズ調整に活用してみてください。

背景画像（Boxモード）について詳しく知りたい方はこちらの記事をご参照ください。

Boxモード・Imgモード

STUDIOではお客様のお声を元に新しい機能の追加や改善を行っています。

「こんな機能あったらいいのに…」や「こんな機能を使いたい！」などございましたら、Slackコミュニティまたはエディターツール内の右下にあるお問い合わせチャットへご連絡ください。

Slackコミュニティはこちらからご参加ください。