STUDIOで背景画像をレスポンシブに切り替える方法
ノーコードツール「STUDIO」で背景画像をデバイスごとに違うものを表示できるかやってみました。
これは私が編み出したかなり強引な方法になります(笑)。
まずは仕上がりイメージです。
まずはPC用の画面をつくり（STUDIOはPCが基準になります）、その中にぴったりとくっつけた枠をもう一個作成します。いわゆる入れ子ですね。
paddingをつけたい場合は、内側の枠につけてください。
PC用の背景画像を外側の枠に設定します。
スマホ用の背景画像を内側の枠に設定します。
ブレークポイントを切り替えて、スマホでの見栄えを確認します。
ブレークポイントをPCに切り替えます。
現状こんな感じになっているはずです。
ここで、スマホ版（内側）の背景画像のサイズを0pxにしてください。
これ以外のサイズだとうまくいかないようです。透明度で調整しようとすると、全部消えてしまいます。
絶対配置だと、STUDIOの場合固定になってしまうようです…。ああ、CSSが書けたら一発で設定できるのに。
このあと、再度スマホのブレークポイントに戻ります。
ここで、背景画像のサイズをcoverに戻します。
これで、PCとスマホの背景画像切り替えができたはずです。ご確認ください。
STUDIOは結構癖があり、CSSでできたことができないということも多いので、裏技に気づいたらどんどんシェアしていこうと思います！よろしくお願いいたします。