【CSS】最近よく見かける背景を固定してスクロールさせる方法

css

2013年くらいから、ポートフォリオサイトなどでよく見るようになった、背景画像を固定してスクロールさせる方法を紹介します。

言葉で説明するのが少し難しいのですが、画面をスクロールすると、画像が固定となって、あたかも下からニュキっと画像がスクロールするように見せるあれです。（トップの画像なような感じのやつです。）

言葉で説明しようとするとやはり難しいですね。
下の方にデモ画面がありますので、そちらから確認して下さい。

[スポンサーリンク]

このページでやること

CSSで背景画像を固定してスクロールさせる方法を紹介します。

CSSで背景画像を固定するサンプルソース

jQueryは必要ありません。
CSSのみで実装可能です。

まずはCSSのサンプルソースを紹介します。


<style type="text/css">
<!--
.header1 {
  display: table;
  height: 800px;
  width: 100%;
  position: relative;
  background: url(./img/bg1.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.header2 {
  display: table;
  height: 800px;
  width: 100%;
  position: relative;
  background: url(./img/bg2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
h1{
  margin: 0 0 50px;
  padding: 50px;
  font-size: 200px;
  color: #ffffff;
  font-weight: bold;
}
//-->
</style>

HTML部分のサンプルソースです。

<!-- HTML部分 -->
<body bgcolor="#e2e2e2">

<div class="header1">
    <h1>Page 1</h1>
</div>

<div class="header2">
  <h1>Page 2</h1>
</div>

デモ

実際に動かすことが出来ます

さいごに

最近では本当よく見かけるようになったデザインです。わたしも好きなデザインの一つです。
なかなか言葉では表現しにくいですが、正式名称はあるのでしょうか。
名前はよくわからなくても、デザインはとてもくせになるよいデザインだと思います。
それでは！

[スポンサーリンク]
関連している記事をピックアップしました！
こちらの記事もあわせて読んで頂ければ嬉しいです。