画像固定するCSSを紹介します

背景画像は固定してテキストだけが流れるようにしたい…

こうした悩みを解決します。

結論から言うと、CSSで背景画像と幅を指定して固定すれば良いです。

サンプルはこちら

あああ
いいい
ううう

コードを下に示します。

 .fixed{
 background: url(××.jpg);
 background-attachment: fixed;
 height:300px;
 background-repeat: no-repeat;
} 
<body>
<div class="fixed">
あああ<br>いいい<br>ううう<br>
</div>
</body>
 

こんな感じです。

background: url(××.jpg); 画像を指定
background-attachment: fixed; 画像が固定される
height:300px; 固定画像の上下幅を決定
background-repeat: no-repeat; 表示幅に指定がない場合、繰り返し画像表示する処理を禁止

テキストを中央に配置するには

背景を固定して、その上をテキストが流れるようにするには、
テキストを子クラスにして、親クラスを起点として中央揃えにするとよいです。

あああ
いいい
ううう
<style>
 .fixed{
 background: url(××.jpg);
 background-attachment: fixed;
 height:300px;
 background-repeat: no-repeat;

.center{
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   margin: auto; /上下左右中央に/
   width: 100px; /必須/
   height: 100px; /必須/
 }
} 
</style>
<body>
<div class="fixed">
<div class="center">あああ<br>いいい<br>ううう<br></div>
</div>
</body> 

position:abosolute;で要素を中心とした絶対配置にして、
margin:auto;で上下左右全てを中央に指定、
width, heightも指定必要で、これは必要に応じて大きさを変更します。