レスポンシブの時、cssにて背景画像を非表示にしたい。

Question

レスポンシブで740px以下の時に、header部分の背景画像を非表示にする実装をCSSにてしたいのですが、
非表示になってくれません。

この背景画像はJavascriptのbgSwitcherを使用して実装してありますので、HTMLでの実装ではございません。
該当箇所を検証して、この背景がある要素は、element.styleで、その中のbackgroundに背景画像が設置されていると判断できます。

検証の状態でこの箇所のチェックボックスを外すと、背景画像が消えますので、レスポンシブのCSSに下記のように記述しましたが、非表示になりませんでした。

element.style{
background:none;
}

大変お手数ですが、ご教示頂けますと、幸いです。

Answer 1

こちらでいかがでしょうか?

@media screen and (min-width: 740px) {
  /* 可能ならクラス名で指定したいですが.. */
  [style*="images/coding.jpg"] {
    display: none !important;
  }
}

style=""のなかに「images/coding.jpg」という文字列がある要素すべてに適用されます。

style=""で指定したCSSは、「!important」で上書きする必要があります。

Answer 2

うーん…もう少し勉強しないと難しい。

まず「レスポンシブのCSS」に

element.style{
  background:none;
} 

と書いてもどこにも適用されません。セレクターがあってない。

あと今回のようにhtmlに直で書かれる場合

<div style='url("") 0% 0% / cover repeat scroll padding-box border-box rgba(0,0,0,0);'></div>

この場合は基本cssで指定したとしても打ち消せません。html直の優先順位はcssより高いです。
やるとしたら書かれていないプロパティで消すことです…が、見た感じ全部指定されてるのでcssで書き換えるのは無理でしょう。

z-indexが-1なのでbgSwitcherで表示しているdivの直下にdivを置いてぴったり上にかぶせることで
見た目上消すというくらいですかね。

追記

そういえば!important指定あったね…申し訳ない