当屏幕缩小尺寸时，背景尺寸会切掉一些部分

Question

以下是测试链接：

http://kotechweb.com/ig112/

问题是，我发现当我缩小窗口屏幕时，背景宽度只是窗口的大小，当我滚动它时，其他部分会切断背景。

代码：

<div style="background:url('./assets/image/bg4.jpg'); padding-top:20px;">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        ....                    
                    </div>    
                </div>  
            </div>  
        </div>

此外，一个背景已经像这样定制了CSS：

background: url('./image/bg1.jpg') top;
padding: 20px 0px;
background-position: 0px -20px;
background-size: 100% 99%;

非常感谢你的帮助。

Answer 1

我假设水平滚动不是你想要的东西，因为你包括了Bootstrap库。

在你的style.css中，你覆盖了默认的.container大小，这会破坏页面的响应能力：

.container {
    width:960px !important;
}

如果您将其删除，您的网页将会响应一个例外。

您的.top_btn类具有绝对位置。这对于快速响应非常有用，因为它会将这些元素推到身体外面。您可以继续将这些作为位置：绝对，如果您的左侧和顶部属性是百分比。或者将这些图像切换成3个不同的图像并将它们分开链接，而不是将图像绝对定位在一个图像上。