固定大小背景下的空白区域答案

【问题标题】：White space bellow a a fixed size background固定大小背景下的空白区域
【发布时间】：2020-12-31 16:15:19
【问题描述】：

我正在制作一个网站，客户想要使用全屏背景图片作为布局。我试图通过将背景设置为固定大小并让用户滚动页面来做出这种响应，但是我遇到了一个问题，在它下面有我无法摆脱的空白。 Here is a gif of the problem

这里是css

@media (max-width: 1279px) {
html,
body {
    height: 100%;
    width: 1280px;
}

body {
background: url('Imagenes/Render_Nutricia.jpg') no-repeat;
background-size: 1280px 720px;
 }
}
@media (min-width: 1280px) {
body {
 background-image: url("Imagenes/Render_Nutricia.jpg");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size: 100% 100%;
 }
}

谢谢

【问题讨论】：

背景尺寸：封面；调整背景图像的大小以覆盖整个容器，即使它必须拉伸图像或从边缘之一切掉一点w3schools.com/cssref/css3_pr_background-size.asp

标签： html css background-image removing-whitespace responsive-images

【解决方案1】：

我不明白您为什么为此使用媒体查询。请检查下面的代码。您要查找的属性是background-size: cover;

html, body {
    height: 100%;
    width: 100%;
}

*{
    margin: 0;
    padding: 0;
}

body{
    background: url("https://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

<!DOCTYPE html>
    <head>
    </head>
    <body>
    </body>
</html>

【讨论】：

我需要用户能够滚动图像以单击按钮，并且封面无法完全显示且无法滚动，至少我无法做到.