如何在手机上获取完整的背景图像

Question

我已经创建了一个网站，是为桌面和移动。但在手机上，你不能看到整个背景图片(缺少一些杯子)，因为导航。我怎么才能得到全貌。当你滑下来，你可以看到整个背景图片和杯子。有人能帮我吗？

我的网站：http://odsgaardklausen.dk/DBS/DBS.php

Answer 1

为主体创建一个媒体查询，以指定在移动视图中更改background-position。

@media (max-width: 767px) {
    body {
        (...)
        background-position: center 50px;
    }
}

第二个值设置目标背景的垂直对齐，因此在本例中，您将图像从主体顶部向下推到50 in。

我还应该注意，媒体查询被设置为767px，以匹配导航栏的引导程序的媒体查询。

Answer 2

正如@Drew在评论中所说的，但只需将其包装在媒体查询中，否则桌面上将有一个空白。

@media only screen (max-width: 480px){
    body{
      background-position: center 50px;
    }
}