如何解决白色波纹管固定大小的背景
我正在建立一个网站,客户希望使用全屏背景图像作为布局。我正在尝试通过将背景设置为固定大小并使用户在页面上滚动来做出这种响应,但是我遇到了一个问题,在它下面有一个我无法摆脱的空白。 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。