媒体查询和背景图片 [英] Media queries and background images

问题描述

我有一个div

<div id="page">

</div>

使用以下css：

   #page {
    background: url('images/white-zigzag.png') repeat-x;
    }

    @media (max-width: 600px) {
  #page {      
  background: url('images/white-zigzag-mobile.png') repeat-x;
  }
}

我注意到当我调整浏览器大小时， 移动的背景（好），但如果我回去，让我的浏览器大，我以前的大背景不总是重现。

I notice when I resize my browser, I see the "mobile" background (good) but if I go back and make my browser large, my previous "large" background does not always reappear.

这是一个间歇性的问题，

It's an intermittent problem but it's happening often enough that I think I should address it.

有没有办法解决这个背景图片不出现问题或调整背景图片的方式，因此，媒体查询收缩背景图像以适应新的大小？据我所知，没有（广泛的）改变背景图像的大小...

Is there any way to get around this "background image not appearing" problem or a way to resize background images, so that the media query "shrinks" the background image to fit the new size? As far as I know there is no (widespread) way to change the size of a background image...

推荐答案

此测试 ：

如果您只想只在桌面上下载桌面版图片...

If you want only the desktop version of the image to be downloaded on the desktop...

和 要在移动设备上下载的移动图片 -

and only the mobile image to be downloaded on the mobile device -

您需要使用 min-width 声明指定桌面映像的最小浏览器宽度...

You need to use a min-width declaration to specify a minimum browser width for the desktop image...

和 a max-width 。

and a max-width for the mobile image.

因此，您的代码将是：

@media (min-width: 601px) {
  #page {
    background: url('images/white-zigzag.png') repeat-x;
  }
}

@media (max-width: 600px) {
  #page {      
     background: url('images/white-zigzag-mobile.png') repeat-x;
  }
}

这篇关于媒体查询和背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！