时间戳

首页 > 解决方案 > 固定大小背景下的空白区域

html - 固定大小背景下的空白区域

问题描述

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

这是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%;
 }
}

谢谢

标签： htmlcssbackground-imageremoving-whitespaceresponsive-images

解决方案

我不明白您为什么为此使用媒体查询。请检查下面的代码。您正在寻找的房产是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>

推荐阅读