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

时间:2016-06-16 12:07:26

标签: html css html5 layout background

enter image description here

以下是测试链接:

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%;

非常感谢你的帮助。

1 个答案:

答案 0 :(得分:1)

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

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

.container {
    width:960px !important;
}

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

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