css3--容器背景分上中下三部分，上下不变，中间部分垂直重复平铺切图方案

拿到个这样的设计稿，蓝色背景图片忽略，注意白线框。
切图要求：
1、红色框位置1：背景不变。
2、红色框位置3：背景不变。
3、红色框位置2：背景需要垂直方向重复，即内容不固定，支持垂直方向延展。
4、黄色框位置4：放置内容区域。

切图方案一：
没准会想到简单粗暴的方式，直接切一张大背景就好了，为什么要较劲，不同页面切不同背景。可以直接那么搞，一次性的还好，时不时的让你维护一下内容，可能会惨死。
切图方案二：

将背景图切为三个部分：
上部、中部、下部。
上部和下部：上部和下部使用容器的多背景图实现。
中部：我暂时想到使用绝对定位容器的方式解决，如果有好的方案可以随时沟通。

下边是代码区：

html代码：

<section class="content-wrap">
            <div class="line-wrap">

            </div>
            <p>我是内容</p>
        </section>

sass代码：

.content-wrap{
    position: relative;
    background:url('/images/top-bg.png') left top no-repeat,
                url('/images/bottom-bg.png') left bottom no-repeat;
    background-size:100% auto;
    .line-wrap{
        position: absolute;left:0;top:4.8rem;bottom:2.73rem;z-index:-1;
        width:100%;
        background:url('/images/middle-bg.png') left top repeat-y;
        background-size:100% auto;
    }
}

实现效果：