2 Bootstrap网站没有背景图片没有响应

我有2个网站我创建 - 我如何获得标题背景图像在移动设备上正确调整大小？当在移动设备上观看时，两侧的图像被切断。2 Bootstrap网站没有背景图片没有响应

我在标题部分的代码对于每个：

下面是每个码：

segregatedsunday.com

#h { 
    background: url(../img/header.jpg) no-repeat center top; 
    padding-top: 180px; 
    text-align:center; 
    background-attachment: relative; 
    background-position: center center; 
    min-height: 700px; 
    width: 100%; 
    color: white; 

    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 

    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

whitehatdev.co

#headerwrap { 
    background: url(../img/header_bg.jpg) no-repeat center top; 
    margin-top: -50px; 
    padding-top:120px; 
    text-align:center; 
    background-attachment: relative; 
    background-position: center center; 
    min-height: 650px; 
    width: 100%; 

    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 

    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

来源

2015-06-21 P. Clark

查看我的移动网站时，标题背景图片过大，即不响应。请参阅http://mobiletest.me/以在手机上查看。 –

P.Clark。继续编辑您的原始问题陈述。告诉我们什么是错的。提示：图片价值1000字。而那个mobiletest.me链接是毫无价值的。或者建立一个展示该问题的示例网页。 etc ... – zipzit

我在看你的第一个例子，它通常看起来很好。额外的100％背景大小的东西不适合这种情况。当我拖动jsfiddle越来越小时，图像应该像“覆盖”一样动态调整大小。哞！

jsfiddle

#headerwrap { 
    background: url(http://www.glitters20.com/wp-content/uploads/2012/11/Funny-Cow-37.gif) no-repeat center top; 
    margin-top: -50px; 
    padding-top:120px; 
    text-align:center; 
    background-attachment: relative; 
    background-position: center center; 
    min-height: 250px; 
    width: 100%; 

    /* -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; */ 

    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

不要混用盖并包含有你吗？它不完全清楚你想要达到什么目标。封面和封套将保持纵横比，所以图像不会变形。

包含

的包含值指定无论容纳箱的的尺寸，背景图像应被缩放，使得每个侧是尽可能的大，同时不超过的长度容器的相应侧。

盖

盖值指定背景图像应如此尺寸，它同时确保两个维度大于或等于容器的相应尺寸尽可能小。

来源

2015-06-21 00:56:12 zipzit

当我删除100％的条目时，它在网页上调整得更好一些，但不会改变移动设备上的任何内容。我尝试了包含，而不是封面，并切断图像，使其不填满屏幕的宽度（这在某些方面更好）。 –

2 Bootstrap网站没有背景图片没有响应

回答

相关问题