html - CSSで画像を水平方向に引き延ばし、3つの別々の画像でHTMLに表示する方法

Question

真ん中が伸びる検索バーを作ろうとしています。left.png、middle.png、right.png の 3 つの画像があります。

jsフィドル

CSSでこのコードを試しました：

.div1 {
    background-image:url('../images/searchbar_a_corner-left.png');
    background-repeat:no-repeat;
    width:15px;
    height:100px;
    float:left;
    padding:0;
    margin:0;
}

.div2 {
    background-image:url('../images/searchbar_a_corner-middle.png');
    background-repeat:repeat-x;
    width:15px;
    height:100px;
    float:left;
    padding:0;
    margin:0;
}  
.div3 {
    background-image:url('../images/searchbar_a_corner-right.png');
    background-repeat:no-repeat;
    width:15px;
    height:100px;
    float:left;
    padding:0;
    margin:0;
}

そして、これは HTML にあります (これは間違った部分だと思います):

<div class="div1">
    <img src="search-icon.svg" />
</div>

<div class="div2">
    <input id="search" type="text" />
</div>

<div class="div3"></div>

表示されるのは right.png だけです。