完整的背景图像工作在Chrome，Opera，Firefox，IE9和10但不是IE11

Question

我正在一个网站上工作，网页的主要部分有一个完整的，固定的背景图片。你可以看到它（http://adjemian.projects.hat.eliotberriot.com/biographie/），或者如下图所示：

页面顶部

向下滚动页面底部

这在预期的每个目标浏览器（Chrome，Firefox，Opera）上都有效，但在IE11上根本不显示背景图像，并出现第二个滚动条：

IE11中的相同页面

以下是（对我而言）相关的HTML标记：

<main id="main" class="site-main has-background" role="main" style="background-image: url(urltomyimage);">
    <section class="page-content">  
        # Page content here
    </section>          
</main>

CSS：

main.has-background {
    background-repeat:no-repeat;
    background-position:center center;
    background-attachment:fixed;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}

@media only screen{
    main.has-background {
        padding:15rem 0;
    }
}

@media only screen and (min-width:40.063em){
    main.has-background {
        padding:20rem 0;
    }
}

@media only screen and (min-width:64.063em){
    main.has-background {
        padding:25rem 0;
    }
}

@media only screen and (min-width:90.063em){
    main.has-background {
        padding:30rem 0;
    }
}

正如您所看到的，我正在添加一些顶部和底部填充，以便在更宽的分辨率下为背景图像留出更多空间。

不幸的是，我没有任何真正的Windows计算机和IE11，我可以在那里进行现场调试。我正在使用Browserstack来检查我的网站是否针对多个浏览器，我发现通过Browserstack使用IE11开发者的工具非常困难。

我希望我提供了足够的信息，只要告诉我你是否需要其他任何信息来帮助我。

谢谢！

Answer 1

尝试在元素样式中添加！important，因为通常它应该呈现正常。

<main id="main" class="site-main has-background" role="main" style="background-image: url(urltomyimage) !important;">