Question

当我改变浏览器的宽度时，我的标题背景图像会改变大小，如果宽度变得足够小，我的图像将被推出。我有background-size: 120%;，我知道这是造成它的原因。有没有办法通过百分比设置背景图像的最小尺寸？如果没有，我该如何解决这个问题？

如果需要，您可以erraticfox.tumblr.com访问我的网站。

哦，这是我的标题CSS代码：

#header {
    margin: auto;
    display: table;
    height: 300px;
    width: 100%;
    min-height: 300px;
    min-width: 800px;
    background: url('https://dm2013.s3.amazonaws.com/assets/img/background.jpg');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position: 0px -650px;
    background-size: 110%;
}

这是一个jsfiddle，你可能想要调整结果窗口的宽度，你会看到我的问题：http://jsfiddle.net/2AbKb/

Answer 1

它没有在这里调整大小。我删除了'display-table'，因为我认为没必要。

<强> HTML

<div id="hed">
</div>

<强> CSS

#hed{


    margin: auto;


    height: 300px;
    width: 100%;
    min-height: 300px;
    min-width: 800px;
    background: url('https://dm2013.s3.amazonaws.com/assets/img/background.jpg');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position: 0px -650px
    background-size: 110%;
 background-color:black;


}

Answer 2

我建议这样的事情：

#header {
  margin: auto;
  display: table;
  height: 300px;
  min-width: 800px;
  background: url('https://dm2013.s3.amazonaws.com/assets/img/background.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

Answer 3

失去background-attachment:fixed;那是你想要的效果吗？

页面宽度更改时，页眉背景图像会更改大小

3 个答案: