无法使SVG正确扩展

Question

尝试添加一个svg文件并让它从页面的一端扩展到另一个重叠的两个div（请参阅下面的模拟图像）

这是页面JSFIDDLE

以下是代码：

HTML：

<!-- Sectional Blue Background -->
  <div id="blueSection">

  </div>

<!-- /Sectional Blue Background -->

CSS

    /* Blue Sectional 3 Steps */
#blueSection {
position: relative;
transform:scale(3, 4);
-webkit-transform:scale(3, 4);
-ms-transform: scale(3, 4);
right: 80em;
}

#blueSection::before {
content: '';
width: 100%;
height: 100px;
display: block;
position: absolute;
top: -80px;
left: 0;
background: url('http://convio.cancer.ca/mIFE/svg/blue.svg') no-repeat;
background-size: 100%;
overflow: hidden;

}



#blueSection::after {
content: '';
width: 100%;
height: 100px;
display: block;
position: absolute;
top: -63px;
background: url('http://convio.cancer.ca/mIFE/svg/blue.svg') no-repeat;
background-size: 100%;
overflow: hidden;
    -ms-transform: rotate(5deg); /* IE 9 */
    -webkit-transform: rotate(5deg); /* Safari */
    transform: rotate(5deg);
}

所以现在正在发生的是全屏桌面模式，它正好在我喜欢的地方，但是它一直延伸到页面的边缘。当您调整屏幕大小时，它不会看到完全不同的大小。在Chrome上的移动设备上它并没有出现（没有尝试过其他浏览器）。在桌面上的IE浏览器中，好像根本没有对蓝色部分进行过编辑。

我真的不确定我做错了什么，如果我需要使用javascript / jquery或只是css我不介意去任何一条路线，我只是想学习如何解决这个。我查看了各种文章，但我看不出自己做错了什么。

非常感谢所有建议！感谢您的时间！

Answer 1

在元素之前和之后尝试background-size: cover。