レイアウト例１

1ページリニア構造ぺーじの例です。
ポートフォリオサイト用などにも活用できそうです。
＊IE対策は別途必要になります。

１カラムのレイアウトのサンプル

HTMLのコード

<section class="back1">
  <div class="inner">
    <h1 class="white">Photoshop</h1>
    <p>デザインカンプ例</p>
  </div>
</section>
<section class="content1">
  <h1>Illustrator</h1>
  <p>ロゴ特集</p>
</section>
<section class="back2">
  <div class="inner">
    <h1 class="white">コーディング</h1>
    <p>レスポンシブサイト</p>
  </div>
</section>
<section class="content2">
  <h1>プログラミング</h1>
  <p>スマホ用アプリ</p>
</section>

CSSの設定

html, body, h1 {
	margin: 0px;
	padding: 0px;
}
.back1 {
	background: url(DSC_0020.jpg);
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}
.back2 {
	background: url(P1000552.jpg);
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}
.content1 {
	background: url(pendant.png) center repeat-y;
}
.content2 {
	background-color: yellow;
}
section {
	height: 600px;
}
.white {
	background-color: rgba(255,255,255,0.5);
}
.inner {
	background-color: rgba(255,255,255,0.8);
	height:100%;
}

• 一部のsectionにbackground-attachment: fixedを設定するのがポイントです。
• 透明度はopacityを使用すると子要素やテキストまで透明化されますので、rgbaを活用しています。
• sectionタグはdivで代用することも可能です。