CSS 背景图像在移动设备上出现在错误的位置

Question

我无法在着陆页上正确显示背景。在我的桌面上，它显示得很好，但在移动设备上，它似乎在页面顶部垂直居中。我是前端新手，在过去的 4 个小时里一直在尝试各种技巧。有人能指出我正确的方向吗？

我已将图像设置为按比例缩放以覆盖整个屏幕。不应该有任何空白区域。我已经尝试在我的桌面上使用响应模式，当我调整大小时，Wright Glider 大部分都留在了视野中，所以图像也应该在 ... viewport?/window 的中间居中。

对于背景，我有一张正常大小的图片，以及一张用于较小设备的裁剪图片

我的网站是http://we-fly.ddns.net

仅在所有设备上使用 Chrome 49 进行测试，Android 为 v5.1

桌面上的响应模式似乎不会产生相同的结果。

来源：https://gist.github.com/yanalex981/992a60dd54be82162a45

截图：

• Desktop
• Nexus 4
• Galaxy Tab A 8

另外，如果有人有任何建议，请与我分享

Answer 1

要解决图像被截断的问题，您需要将媒体查询中的背景位置设置为初始位置...因此，在每个 css 媒体查询中粘贴以下代码：

background-position: initial; 

这会将您在移动设备上的背景位置重置为默认位置...从这里您应该能够应用不同的样式来根据自己的喜好拉伸/扩展图像。 :)

Answer 2

这是我的第二个答案，我创建了这个而不是将其添加到我的初始答案中，因为方法不同。

在您的 HTML（索引）文件中，添加如下图像：

<img id="imgBackground" src="http://we-fly.ddns.net/images/back.jpg" />

（我建议直接在body标签后面加上）

在您的 CSS 中，我将发布整个内容，这有点有趣，因为您的最后一个 @Media (Min-Width: 601px) 覆盖了您桌面页面的默认设置...您可能需要考虑删除此媒体查询...请参阅下面代码中的 cmets 以查看更改：

    /* Set initial values for your image background */
#imgBackground{
    position:absolute; /* Absolute Positioning so we can use "top" and "Left" */
    top:0px; /* Set top edge to 0px (Top of the screen) */
    left:0px; /* Set left edge of image to 0px, so it starts at the left edge of the screen. */
    width:100%; /* We want our widt to be 100% of our browser window */
    height:auto; /* we don't care about the image height, so let it set itself based on the image's proportions */
    position:fixed; /* Make our image scroll with the user so if they can scroll they don't leave our background behind, exposing the white "body" tag background. */
}

body {
    text-align: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    margin: 0;
    padding: 0;
}

#quote-conatiner {
    position: fixed;
    margin: auto auto 24px auto;
    bottom: 20%;
    left: 0;
    right: 0;
    text-align: center;
    background-color:rgba(180, 180, 180, .4);
}

h3 {
    font-family: Garamond sans-serif;
    color: white;
    width: 80%;
    margin: .5em auto .5em auto;
}

.button {
    font-family: sans-serif;
    text-decoration: none;
    padding: .3em 0.6em;
    border-radius: 8px;
    border: 2px solid #59169c;
    background-color: #417;
    color: white;
    box-shadow: 0 0 64px black;
}

.button-container {
    position: fixed;
    margin-left: auto;
    margin-right: auto;
    top: 80%;
    left: 0;
    right: 0;
}

.button:active {
    background-color: #330855;
}

@media only screen and (max-width: 600px) {

/* set image background to achieve max Height and we don't care about width (auto) on mobile displays. */
    #imgBackground{
        position:absolute;
        top:0px;
        left:0px;
        width:auto;
        height:100%;
        position:fixed;
    }

    body {
        margin: 0;
        padding: 0;
    }

    h3 {
        font-size: 1.2em;
    }

    .button {
        font-size: 1.4em;
    }
}

@media only screen and (max-width: 400px) {

    /* set image background to achieve max Height and we don't care about width (auto) on mobile displays. */
    #imgBackground{
        position:absolute;
        top:0px;
        left:0px;
        width:auto;
        height:100%;
        position:fixed;
    }

    body {
        margin: 0;
        padding: 0;
    }

    h3 {
        font-size: 0.8em;
    }

    .button {
        font-size: 1.0em;
    }
}

/* May want to consider getting rid of this Query, if you don't it is overriding your styles set above your media querys. */
@media only screen and (min-width: 601px) {

    /* Set image background qualities for any display larger than 601px.*/
    #imgBackground{
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:auto;
        position:fixed;
    }

    body {
        margin: 0;
        padding: 0;
    }

    h3 {
        max-width: 600px;
        font-size: 1.3em;
    }

    .button {
        font-size: 1.3em;
    }
}

Answer 3

"background-size: cover" does not cover mobile screen

和

height: 100% or min-height: 100% for html and body elements?

持有答案。我必须为 background-size: cover 设置根元素的高度才能工作：

html {
    height: 100%;
}

body {
    min-height: 100%;
}

它适用于 Nexus 4 和 Galaxy Tab

必须这样做的原因（从上一个答案中窃取）：

顺便说一句，您必须将height 和min-height 分别指定为html 和body 的原因是因为这两个元素都没有任何固有高度。默认情况下，两者都是height: auto。它是具有 100% 高度的视口，因此 height: 100% 取自视口，然后至少应用于 body 以允许滚动内容。

Answer 4

@Alex 您希望图像如何显示...对于不同的屏幕尺寸，您可以使用@media css 属性根据屏幕尺寸调整图像大小。

@media screen and (min-width: 480px) {
body {
    property: attribute;
}
}

在此处查看有关@media css 属性的更多信息： http://www.w3schools.com/cssref/css3_pr_mediaquery.asp