背景画像固定の中のテキストのレスポンシブ設定

お世話になります。
下記のような高さの300pxほどの背景画像が固定された左右余白なしのものに、
テキストを載せています。
レスポンシブ画面で、背景画像全体を表示させたいため、
background-size: contain;
またはサイズ指定すると、画像の構図はぴったりなのですが、
スクロールの際、中のテキストが背景画像から
飛び出してしまうのですが、これを防ぐ方法はありますでしょうか？
お手数おかけしますが、よろしくお願いします。

background-size: cover;
　　　　　　↓
background-size: contain;　レスポンシブ版
　　　　　または
background-size: 100% auto;

以下html————

<div class=”fixed-bg”><h1 class=”slider-txt”>テキスト文字</h1></div>

以下css————

.fixed-bg {　　背景画像
background-image: url(‘●●.jpg’);
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 300px;
margin: 0 calc(50% – 50vw);
width: 100vw;
position: relative;
padding:5%;
}

.slider-txt {　中のテキスト
color: #FFF;
font-size: 1.8rem;
text-align: center;
line-height: 2em;
text-shadow: 2px 2px 3px #111;
　position: absolute;
　top: 50%;
　width: 100%;
}

@media screen and (max-width: 600px){　レスポンシブ設定
.fixed-bg{
background-size: contain;
または
background-size: 100% auto;
}