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