止まる背景画像

スクロールしても背景画像が止まっています。

用意する画像

CSSで指定しますので、画像サイズは、大体で結構ですが、画面横幅いっぱいに配置しますから、幅=1,200px、高さ=350px〜400px程度の画像を用意してください。

CSSの指定内容

#bgphoto{height:350px;background:url(images/carousel03.jpg);
background-size: cover;
background-attachment:fixed;
margin:30px 0;}

このCSSソースは、コピーして使ってください。

ここでは、画像の高さを350px(変更可)にしています。そして、「cover」と「fixed」の指定をしています。

止まる背景画像

これが止まる背景画像のサンプルです。

背景画像の配置は、全画面(container-fluid)ですので、文字やボタンを配置するには、この中に固定幅(container)やセンタリング(text-center)等の指定をしてください。

HTML Source (背景画像の中に配置するコンテンツを、この中に書いてください)

<div id="bgphoto" class="container-fluid">
....
</div>

上記ソースをコピーして使ってください。

注意 以下、「止まる背景画像」の動作確認のための余白。