▼EntryMore▼

CSSソース

HTMLソース

テクニック詳細

内容はいたって簡単です。
まず、キーとなる画像を用意します。（サンプルでは青い光っぽいやつ）
それを配置し、背景（サンプルでは黒い部分）と、コンテンツの背景（サンプルでは白い部分）をそれぞれ決めて、はみ出し部分の位置をデザインします。

そして、メインビジュアルとなる部分をそのまま白い背景と同じ幅にして（はみ出す部分を削って）一緒に切り出します。
そうすると、以下のような画像になります。

さて、続いてコンテンツの背景の白い部分 "のみ" を非表示にして、青いオブジェクトと、全体の黒い背景だけの画像にし、それを書き出します。

この 2 つの画像を書き出したら、あとはそれをずれがないように配置するだけです。
サンプルではwrapの ID のついた div に黒いほうを、headerの ID のついた div に白いほうの画像を背景として配置しています。
ここでの注意点としては、どちらの画像もセンタリング配置したときにしっかりと重なるように切り出すことです。

配置方法は、wrap の背景は左右センタリング配置し、header の背景は左上起点に配置します。
そして、header を内包している wrapInner をセンタリング配置することで、白い背景の切れた部分と、その下に配置された黒い背景の続きの部分がぴったりと重なり、まるではみ出しているように見えるようになります。