Question

我有一张照片作为背景。在我有一个滚动条之前，它现在已经消失了。这就是我想要的。

我现在面临的问题是：

在桌面上，它不会显示我的全貌。例如杯子和手机，我的照片被切成两半。

如何将整个画面作为桌面和移动设备的背景，我该怎么做？

这是主页：http://odsgaardklausen.dk/DBS/DBS.php

尝试在移动设备上查看它，这样你就可以看到我的意思了。

我的css

    /* CSS Dokument */
    body{
       background: url(baggrund.jpg) no-repeat center center fixed; 
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;
    }

Answer 1

这将修复图像的裁剪：

body {
  background: url(baggrund.jpg) no-repeat;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
}

但现在Image不会填满整个背景。问题不在于代码中。您尝试使用一个图像以适应所有可能的分辨率。没有一些负面的方面，如裁剪，这是不可能的。

移动设备，平板电脑和桌面等断点至少需要三种不同的图像。

尝试阅读一些关于响应式网页设计和媒体查询的内容。

http://sixrevisions.com/css/responsive-background-image/

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

希望这会有所帮助

作为背景的图片

1 个答案: