Question

我的标题背景图片有问题。我正在为内容区域创建一个最小宽度为960px的无响应网站。当屏幕为960px或更大时，标题中的背景图像会穿过整个屏幕。当屏幕小于960像素时，标题中的背景图像开始向左缩小，向右滚动时在右侧留下空白区域。有办法：

屏幕滚动到目前为止还没有显示空白区域？和/或
在滚动允许的情况下，让背景图像显示在屏幕的尽可能远处？

这是我的CSS：

header {
        display: block; /* So that all browsers render it */
        margin: 0 auto;
        height: 300px;
        background: url("http://upload.wikimedia.org/wikipedia/commons/5/51/Swallow_flying_drinking.jpg") no-repeat top center;
        background-attachment: fixed;
    }

.subWrapper {
        width: 960px;
        margin-left: auto;
        margin-right: auto;
        padding: 50px 50px;
        background-color:rgba(255,255,255,0.7);
    }

我的HTML：

<body>
        <header>
        <div class="subWrapper">        
        </div>
        </header>
</body>

请参阅此JSfiddle以获取示例： http://jsfiddle.net/QrMV4/2/

非常感谢你！

Answer 1

/* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;

Demo Here

Answer 2

如果我理解你的问题......

插入：

overflow:hidden;

在header

Answer 3

你需要替换背景附件：固定为滚动并在页眉上放置宽度，因为你的意思是将标题置于中心，将subWrapper的widt：960px替换为860px并删除margin-left：auto和marging -right：auto ...

您可以查看jsFiddle

http://jsfiddle.net/9YuW6/

header {
    display: block; /* So that all browsers render it */
    margin: 0 auto;
    height: 300px;
    width:960px;
    background: url("http://upload.wikimedia.org/wikipedia/commons/5/51/Swallow_flying_drinking.jpg") no-repeat top center;
    /*background-attachment: fixed;*/
}

全宽背景图像

3 个答案: