yokoテーマのsubmenuを画像にしたいのですが・・・

sub navに以下のコードを追加しましたところ画像になりました。
しかしブラウザの幅を狭めると画像が崩れてしまいます。
画像は840×150の画像を作ってずらして表示させています。

.menu { overflow: hidden; }
.menu-item {
width: 840px;
height: 50px;
float: left;
text-align: center;
}
.menu-item a {
background-image: url(./images/menu.jpg);
display: block;
position: relative;
line-height: 50px;
color: white;
text-decoration: none;
text-indent: -9999px;
}

.menu_1 a { background-position: 0 0; }
.menu_2 a { background-position: -140px 0; }
.menu_3 a { background-position: -280px 0; }

.menu_1.current-menu-item a { background-position: 0 -36px; }
.menu_2.current-menu-item a { background-position: -140px -50px; }
.menu_3.current-menu-item a { background-position: -280px -50px; }

.menu_1 a:hover { background-position: 0 -72px; }
.menu_2 a:hover { background-position: -140px -100px; }
.menu_3 a:hover { background-position: -280px -100px; }

nobitaさん
ご返答ありがとうございます。
background-size:cover
やってみたのですがやはり横長の画像がメニュー一つ一つに割り振られてしまいます。
ちなみに
.menu-item a {
の中に追記してみました。
ほかにも試したのですがやはりわかりません。
よろしくお願いいたします。