停止响应背景图像在某一点减少

Question

我有一个背景图片，我通过将background-size: 80%;添加到我的CSS代码来做出响应。当我最小化浏览器窗口它在一定程度上起作用时，问题是：我希望背景图像在某个点停止缩小，就像我网站上的其他元素那样。但它无限减少。为了说明我的意思，请在我的网站上查看：http://www.filmfutter.com/forum/ 它是顶部的白色图像。

目前CSS代码如下：

background-image: url(../images/blueTemptation/blueTemptationHeader.png); 
background-size: 80%; 
background-repeat: no-repeat; 
background-position: top center;

Answer 1

您可以在该特定点添加媒体查询断点。给定的像素值是近似值。

@media only screen and (max-width: 1140px) {
  body {
    background-size: 897px; 
  }

}