はじめに

画像アドレスを入力することで、
背景画像を動的に変更する方法について書いていきます

実行

基本となるビューファイルは次のようにします。

.body=text_area"object_name",{class: "wall-url"},{id: "wall-url"}.wall-btn画像を変える 

texr_areaが画像アドレスを張り付ける部分で、.wall-btnを押したら画像を変わるものとします。

次にJavaScriptです。（jQueryで書いています）

$(function(){$(".wall-btn").on("click",function(){})});

これで、.wall-btnをクリックした時に発火する関数ができました。
次は、処理の内容を書いていきます。

$(function(){$(".wall-btn").on("click",function(){varimage=$("#wall-url").val();})});

これでテキストエリアに入力された画像アドレスを取得し、変数imageに代入できます。
テキストエリアのidがwall-urlとなっているので、#wall-urlの中身を取得するようにすればよいわけです。

最後に、背景画像を取得した画像アドレスのものに変更します。

$(function(){$(".wall-btn").on("click",function(){varimage=$("#wall-url").val();$(".body").css('backgroundImage',`url("${image}")`);})});

注意するところは、background-imageを変更する処理ですが、
ここではbackgroundImageとなっているところです。
-がなくなって、直後の文字が大文字になっているわけですね。

url("${image}")の部分は、''で囲むと${image}がただの文字列と表示されるので、この表記にしています。
また、url(${image})としてもエラーになるので、からなず""をつける必要があります。