画像固定する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も指定必要で、これは必要に応じて大きさを変更します。