blocks|key|2676608|text|@media+only+screen+and+(max-width:+767px)
{
++++div.demo-request-backgroundimage
++++{
++++++++background-image:+url(/wp-content/uploads/2018/05/mobilecontactusheader.jpg)+!important;
++++++++background-size:+cover;
++++++++background-repeat:+no-repeat;
++++}
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2676609|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>@media only screen and (max-width: 767px)
{
 div.demo-request-backgroundimage
 {
 background-image: url(/wp-content/uploads/2018/05/mobilecontactusheader.jpg) !important;
 background-size: cover;
 background-repeat: no-repeat;
 }
}
</code></pre>

blocks|key|2466684|text|这是因为你在媒体查询之外使用了更多的细节。尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2466685|@media+only+screen+and+(max-width:+767px)+{
++++div.et_pb_section.et_pb_section_0+{
++++++++background-image:+url(/wp-content/uploads/2018/05/mobilecontactusheader.jpg)+!important;
+++++}
}|code-block|syntax|javascript|2466686|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

It's because you are using more specificity outside of the media query. Try:

<pre><code>@media only screen and (max-width: 767px) {
 div.et_pb_section.et_pb_section_0 {
 background-image: url(/wp-content/uploads/2018/05/mobilecontactusheader.jpg) !important;
 }
}
</code></pre>

blocks|key|2676791|text|您想要更改.et_pb_section.et_pb_section_0+img，以便在media-query中使用：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2676792|https请参阅jsFiddle：：+https://jsfiddle.net/smuf3c3t/|BOLD|2676793|.et_pb_section.et_pb_section_0+{
++++background-image:+url(https://material.angular.io/assets/img/examples/shiba1.jpg)!important;
++++width:500px;
++++height:500px;
}




@media+only+screen+and+(max-width:+767px)
{
.et_pb_section.et_pb_section_0
{
background-image:+url(https://material.angular.io/assets/img/examples/shiba2.jpg)+!important;
background-size:+cover;
background-repeat:+no-repeat;
}
}|code-block|syntax|javascript|2676794|<div+class="et_pb_section+et_pb_section_0+demo-request-backgroundimage+et_pb_with_background+et_section_regular">
</div>|2676795|​|2676796|从你的网站编辑评论：：|2676797|当我调整大小时，看看发生了什么：|2676798|📷|atomic|2676799|2676800|，因此删除+!IMPORTANT|2676801|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/smuf3c3t/|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/7c6a5e21bde0d77e559092c1ae7264b2.jpeg|imageAlt^0|5|U|17|B|0|H|1|J|U|0|0|0|0|0|A|1|0|8|8|0|0|1|1|0|0|0|5|6|A|0^^$0|@$1|2|3|4|5|6|7|1F|8|@$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1K|8|@$9|1L|A|1M|B|H]]|D|@$9|1N|A|1O|1|1P]]|E|$]]|$1|I|3|J|5|K|7|1Q|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|K|7|1R|8|@]|D|@]|E|$L|M]]|$1|P|3|Q|5|6|7|1S|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1T|8|@$9|1U|A|1V|B|H]]|D|@]|E|$]]|$1|T|3|U|5|6|7|1W|8|@$9|1X|A|1Y|B|H]]|D|@]|E|$]]|$1|V|3|W|5|X|7|1Z|8|@]|D|@$9|20|A|21|1|22]]|E|$]]|$1|Y|3|Q|5|6|7|23|8|@]|D|@]|E|$]]|$1|Z|3|10|5|6|7|24|8|@$9|25|A|26|B|H]|$9|27|A|28|B|C]]|D|@]|E|$]]|$1|11|3|-4|5|6|7|29|8|@]|D|@]|E|$]]]|12|$13|$5|14|15|16|E|$17|18]]|19|$5|1A|15|1B|E|$1C|1D|1E|-4]]]]

you want to change <code>.et_pb_section.et_pb_section_0</code> img so in <code>media-query</code> use : 
see jsFiddle:https: <a href="https://jsfiddle.net/smuf3c3t/" rel="nofollow noreferrer">https://jsfiddle.net/smuf3c3t/</a>
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.et_pb_section.et_pb_section_0 {
 background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)!important;
 width:500px;
 height:500px;
}




@media only screen and (max-width: 767px)
{
.et_pb_section.et_pb_section_0
{
background-image: url(https://material.angular.io/assets/img/examples/shiba2.jpg) !important;
background-size: cover;
background-repeat: no-repeat;
}
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="et_pb_section et_pb_section_0 demo-request-backgroundimage et_pb_with_background et_section_regular"&gt;
&lt;/div&gt;</code></pre>
</div>
</div>


EDIT TO COMMENT FROM YOUR WEBSITE: 
look what happened when I resize: <a href="https://i.stack.imgur.com/Fz5XS.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Fz5XS.jpg" alt="enter image description here"></a>

SO remove the <code>!IMPORTANT</code>

blocks|key|17599|text|尝试使用多个类名|type|unstyled|depth|inlineStyleRanges|entityRanges|data|17600|一个类用于普通Css，另一个类用于媒体查询|17601|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

try it with multiple classname

One Class for Normal Css
and
Other For Media Queries

I have a website in which for the mobile view I want different image and for the desktop view, I want another one. 

For the desktop view, the following HTML/CSS code is working perfectly fine:

HTML:

<pre><code>&lt;div class="et_pb_section et_pb_section_0 demo-request-backgroundimage et_pb_with_background et_section_regular"&gt;
&lt;/div&gt;
</code></pre>

 
CSS:

<pre><code>div.et_pb_section.et_pb_section_0 {
 background-image: url(/wp-content/uploads/2018/05/contactusheader-2-min.jpg)!important;
}
</code></pre>

 
What I am trying to achieve now for the mobile view, I want the following CSS to be called but I am not sure why the following background image is not getting called in the mobile view. 

<pre><code>@media only screen and (max-width: 767px)
{
.demo-request-backgroundimage
{
background-image: url(/wp-content/uploads/2018/05/mobilecontactusheader.jpg) !important;
background-size: cover;
background-repeat: no-repeat;
}
}
</code></pre>

Overriding images in html/css

我有一个网站，其中移动视图我想要不同的图像和桌面视图，我想另一个。对于桌面视图，以下HTML/CSS代码可以很好地工作：HTML：<div class="et_pb_section et_pb_section_0 demo-request-backgroundimage et_pb_with_background et...

问覆盖html/css中的图像
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问覆盖html/css中的图像EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问覆盖html/css中的图像
EN