CSS background-imageの構文について

Question

CSSのbackground-imageについて質問です。

現在のプロジェクトで指定されている構文は例えば、marginなら
margin-right:10px
ではなく
marginRight:'10px'

こんな感じです。

そして、今回やりたいことなのですが、この構文パターンでない場合だと、

background-image: url('fallriver.jpg')

こういうのを描きたいです。
urlの中にはダウンロードURLをthis.state.~~のようにいれたいので、そちらも含めて教えていただけると助かります。

回答お待ちしております。

Comments

[maisumakun]

「現在のプロジェクトで指定されている構文」とありますが、言語は何でしょうか（標準のCSSではそのような書き方はできませんので、何かしらのプリプロセッサを使われていると思われます）。

[MOTOMUR]

material-uiです。言語はjsですReactjsです。

Answer 1

JavaScript経由の指定でしたら、プロパティはキャメルケースでbackgroundImageとして、値の方は全体を文字列化した"url('fallriver.jpg')"とすればいいのではないかと思います。

ただし、fallriver.jpgのパスはフレームワークに沿って変換が必要かもしれません。

Comments

[MOTOMUR]

変換を使わずに同じようなことはかけないでしょうか。

backgroundImage：　の右側にurl以外を用いて、ダウンロードURLを書いたりできないのでしょうか？

[maisumakun]

最終的に要素が必要とするCSS属性自体が、url()の構文を取ります（他の構文で実用性のあるのは、現状なさそうです）。

[MOTOMUR]

丁寧な回答ありがとうございました。助かりました。