背景には柔軟な背景画像があしらわれています（オハイオ州とシャドウ）

Question

私はサイトの特徴として背景画像とテクスチャを使用するサイトデザインを持っています。

は、ここでは、背景のデザインコンセプトを参照してください：http://www.flickr.com/photos/54233587@N03/6145240784/in/photostream

背景はこのように動作するように意図されています

ページの背景がタイル張りパターンを持っている（またはいくつかのページで固体の背景色があるでしょう）。

背景の上部が背景画像で上書きされます。背景画像は大きな画像（幅2000ピクセル）で、ウィンドウの中央に配置する必要があります。ページに応じて、画像の高さは下から切り詰められます（つまり、1ページでは画像が400ピクセルになる必要がありますが、他のページでは450ピクセルになることがあります）。この背景画像には、CSS3のボックスシャドウが適用されているため、画像の下部にわずかな影があります。この背景画像は固定位置を使用できません。つまり、スクロールするとページとともに移動する必要があります。

他のすべてのページコンテンツは、スクリーンショットの黒いボックスで示されている中央揃えのdivで背景の上に表示されます。

タイル張りの背景のHTML5 htmlノードを対象にしてこれを達成しようとしました。

html { 
    background: url(../img/pegboard.jpg) repeat center; 
} 

次に、オーバーレイされた背景画像のために、div要素を使用して画像を挿入しています。

<div id="bgimage"><img src="mybgimage.jpb"></div> 

次にしようとする中心、スクロール時に固定されておらず、底部からクロップ画像にDIVのサイズを変更するIMGスタイリング。すべて成功しません。

ありがとうございました。

Answer 1

私はこのようなことをします。

HTML：

<div id="bgimage"></div> 
<div id="content"> 
    Actual content goes here. 
</div> 

CSS：タイトルの最後の部分のための

body { 
    background: url(../img/pegboard.jpg) repeat center; 
} 
#bgimage { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    background: url(../img/mybgimage.jpg) no-repeat center; 
    height: 400px; 
    box-shadow: 0 5px 5px -5px #000; 
} 
#content{ 
    margin: 0 auto; 
    width: 960px; 
    height: 1000px; 
    background: #000; 
    filter: alpha(opacity=50); 
    opacity: 0.5; 
}