CSS背景图像在手机上出现错误位置

我无法在登录页上正确显示背景。在我的桌面上，它显示得很好，但是在手机上，它看起来是垂直于中间的，在页面的顶部。我是前端新手，在过去的4个小时里一直在尝试各种各样的黑客攻击。谁能给我指一下正确的方向吗

我已将图像设置为缩放以覆盖整个屏幕。不应该有任何空白区域。我已经尝试使用响应模式在我的桌面上，Wright Glider大部分停留在视图中，因为我调整大小，所以图像也应该在中间…视口？/窗口

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

我的网站在

Android是v5.1，仅在所有设备上使用Chrome49进行测试

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

资料来源：

截图：

---

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

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

background-position: initial; 

---

这将重置您的背景位置默认时，移动。。。从这里，您应该能够应用不同的样式来根据自己的喜好拉伸/扩展图像。：）

@Alex您希望图像显示的准确程度…对于不同的屏幕大小，您可以使用@media css属性根据屏幕大小调整图像大小

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

有关@media css属性的更多信息，请参见此处：

及

他坚持回答。我必须为

background size:cover

设置根元素的高度才能工作：

html {
    height: 100%;
}

body {
    min-height: 100%;
}

它适用于Nexus 4和Galaxy选项卡

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

顺便说一句，您必须分别为

html

和

body

指定

height

和

minheight

的原因是这两个元素都没有任何固有高度。默认情况下，两者都是

height:auto

。它是具有100%高度的视口，因此

height:100%

从视口中获取，然后至少应用于

body

，以允许滚动内容

---

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

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

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

---

兄弟。。。为什么你不能解释堆栈溢出限制。。。我还没有达到50分。。。我只能对自己的答案发表评论…：/如果你问我，这个主意太糟糕了：PI更新了我的问题。是的，contain并不是我想要的：\@AlexYan你不会通过发布这样的东西来获得那个代表。事实上，你给了我一个备份计划的想法。我想如果我不能使用它，我可以将背景色设置为照片边框的颜色cover@Metroidaron虽然它还没有覆盖手机上的整个页面，但至少它现在还没有被截去一半。这是一个伟大的进步，我已经尝试了过去4个小时！你做了什么？我能看到的唯一区别是

背景位置

属性查看我的最新答案了解我所做的：）@Metroidaron哦，我想你已经掌握了我所有的信息来源。它只有大约4个文件，我有CSS文件和索引，没有图像，所有的东西都是相对路径，所以我不得不更改URL，但我很快就完成了：）现在检查我的链接，我修改了你的代码以获得更好的结果这就是我正在使用的。问题是位置已关闭。当我用Chrome在桌面上以与手机和平板电脑相同的分辨率试用时，它们显示出完全不同的效果results@Alex你能详细说明你所说的不同结果是什么意思吗。我建议试着把图片放到身体里，然后用屏幕大小重新调整大小。我已经提供了截图。请看一看。桌面版是我想象中的样子，而其他两个是它在桌面上的实际样子mobile@Alex我在带有移动视图的chrome上试用了以下代码：删除/*背景图像：url（“../images/back.jpg）从body cssI，如果我无法找到封面，我将尝试通过个人媒体查询纵向和横向视图

    /* 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;
    }
}