Centered oval shape with repeated pattern on either side

Question

I have an image that isn't as big as all screen sizes, yet I want it to be displayed on screens with whatever width by adding a repeated pattern on either side. I can of course make the image a lot wider but that would cause the page to load a lot slower as well.

It's a bit hard to explain by text so here are some images and the JSFiddle Demo.

#layer_top {
    background:url("http://puu.sh/cajm0/c0c2cc9475.jpg") repeat;
    width:100%;
    height:136px;
}

#layer_transition {
    width:100%;
    height:36px;
    margin-top:-36px;
    background-image:url("http://puu.sh/cajG0/2768274649.png");
    background-repeat:no-repeat;
    background-position:center;
}

#layer_bottom {
    width:100%;
    height:100px;
    background:url("http://puu.sh/cajmN/9b1e9ef79f.jpg") repeat;
}

<div id="layer_top"></div>
<div id="layer_transition"></div>
<div id="layer_bottom"></div>

Result:

Wanted Result:

Answer 1

You could achieve that by adding a pseudo-element to the top layer which is formed as ellipse and it's positioned with the respect of the layer.

Then simply apply the same background image to both, layer and the pseudo-element:

Example Here

#layer_top, #layer_top:after {
   background:url("http://puu.sh/cajm0/c0c2cc9475.jpg") repeat;
}

#layer_top { width:100%; height:136px; position: relative; }

#layer_top:after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 500px; height: 100%;
    left: 0; right: 0; top: 20%;
    margin: auto;
    border-radius: 50%;
}

---

You could also use clip to cut the extra part of the oval shape.