白色波纹管固定大小的背景

编程问答 2022-07-06

问题描述

我正在建立一个网站，客户希望使用全屏背景图像作为布局。我正在尝试通过将背景设置为固定大小并使用户在页面上滚动来做出这种响应，但是我遇到了一个问题，在它下面有一个我无法摆脱的空白。 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%;
 }
}

谢谢

解决方法

我不明白您为什么为此使用媒体查询。请检查以下代码。您要查找的属性是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>

background-imagehtmlremoving-whitespaceresponsive-images