背景图片获得 "zoomed in"

Background image gets "zoomed in"

我有这张红色背景图片,看起来像这样:

那些矩形看起来又脆又漂亮。但是,当我使用 CSS 将其添加为背景图像时,我得到了放大效果并且看起来一点也不好:

图片尺寸为1800*344px。这里有人建议使用 background-size: contain;但这以完全不显示背景而告终。

这是HTML:

<section id="aboutprocess">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <p class="text-center">Our agile team continuously delivers working software and empowers your organization to embrace changing requirements.</p>
                <button type="button" class="btn btn-default center-block blue">more</button>
            </div>
        </div>

    </section>

和 CSS:

                #aboutprocess {
                        margin-top: 64px;
                        padding: 64px 0;
                        background: url(../img/tech_bg.jpg) no-repeat center center fixed;
                        width: 100%;
                        height: 344px;
                        background-size: cover;
                    }

如何才能获得与设计文件中所示相同的结果?谢谢你的帮助。

背景大小设置为覆盖。它会根据 window 大小的大小将图像拉伸或倾斜到屏幕大小。最好在这种情况下使用包含,因为从图像的外观来看,我相信它可以在不显示可见连接的情况下重复,因此请尝试以下 css.

#aboutprocess {
                    margin-top: 64px;
                    padding: 64px 0;
                    background: url(../img/tech_bg.jpg) repeat center center fixed;
                    width: 100%;
                    height: 344px;
                    background-size: contain;
                }

希望对您有所帮助。