如何在不调整大小或裁剪的情况下获得全宽背景图像

Question

我想要一个全宽的背景，但是当我使用background-size: cover时，它的一部分被剪掉了。使用background-size: contain，它在右侧重复。有没有可能在不裁剪、调整大小或重复的情况下拥有完整的尺寸？

CSS：

.home-3 {
    background-image: url("https://imgur.com/a/r9JRp");
    background-size: contain;
    background-attachment: fixed;
    background-repeat: no-repeat;
    height: 100%;
}

Answer 1

您需要添加以下CSS：

body, html {
    height: 100%;
    margin: 0;
}
.home-3{
background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Answer 2

你试过这个吗？

body {
    background-image: url("https://imgur.com/a/r9JRp");
    background-position: center top;
    background-size: 100% auto;
}

Answer 3

尝试此设置背景大小以覆盖

.home-3 {
    background-image: url("https://imgur.com/a/r9JRp");
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}