のオーバーレイ画像と背景

でそれらの両方を維持し、私は私がバックグラウンドでそれらを維持しながら、別の上で1つを使用する必要がある2枚の画像、を持っている現在、私は次のコードを使用：のオーバーレイ画像と背景

<div id="about_splash"> 
<img style="width:85%" src="image_src" /> 
</div>

about_splashは背景のCSS属性を持っています

問題は、これらの2つの画像が他のHTMLオブジェクトの背景にある必要があるということです。 div＃about_splashの上と下になります。

私はZインデックスを入れてみましたが、それはうまくいきませんでした。私は、次のコードを使用している場合、それは親よりも少し大きいので

は、どのようにiは、内部の画像を拡大縮小することができEDIT

<div style="background: url(layout/images/illustration.gif) 
     no-repeat center;min- height:500px;"> 

    </div> 
</div>

出典

2012-05-08 Aroha Labs

ファーハン・アフマッドはすでにしかし、私は少しさらに貢献したいと思います、多分それが将来的にいくつかの助けとなるであろう、あなたに良い答えを提供します。

これはちょっと前にコンテナの位置をにして画面のデッドセンターに入れて、最初のものの真ん中に別のコンテナを配置した小さなコードスニペットです。位置決めは流動的であり、観察者の解像度に依存する。

HTML：

<div id="parentContainer"> 
    <div id="childContainer"> 
     <!-- I'm the center of attention --> 
    </div> 
</div>

CSS：

#parentContainer 
{ 
    height: 200px; 
    width: 200px; 
    background: #9dc0dd; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -100px; /*This is half of the container Height*/ 
    margin-left: -100px; /*This is half of the container Width*/ 
} 

#childContainer 
{ 
    height: 100px; 
    width: 100px; 
    background: #435c68; 
    position: relative; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; /*This is half of the container Height*/ 
    margin-left: -50px; /*This is half of the container Width*/ 
}

上記のスニペットのデモがhereを見つけることができます。

出典

2012-05-08 15:05:24 Peter

これはこれが私が正確に探していたもののためのトリックでした。 http://jsfiddle.net/g2w7e/41/ –

フィドルがあなたのアイデアが異なるかもしれないというヒントを提供したので、あなたは何を達成しようとしているのかまだ分かりません。あなたのケースにはより洗練された解決策があるかもしれませんが、私が言ったように、私はそれが正確であるかどうかまだ分かりません。通常、スニペットでは、中にコンテンツが配置されるようにコンテンツを配置する必要があります。代わりに、私はファーハンが提案したことでそれができると確信しています。 – Peter

基本的に、基本的な必要性は、2つのdiv要素またはリスト要素の間のオーバーレイである背景イメージを持つことです。 http://jsfiddle.net/g2w7e/64/（出力を確認して、私が[リンク]が何を望んでいるかを見てください）。今問題は、それらの間のイメージが（サイズで）かなり大きいので、私は実際のサイズの20％に縮小されるように、それを2つのレイヤーで分割する必要があったということです。私は朝から何かを得ようとするでしょう。私は私が何をする必要があるかの手がかりを持っていると思います。 –

： CSS3はこの種のものを可能にし、それはこのようになります：あなたは以下IE8かをサポートする必要がある場合

body { 
    background-image: url(images/bg.png), url(images/bgtop.png); 
    background-repeat: repeat, repeat-x; 
}

はしかし、その後、あなたはそれを回避することができます最善の方法は、余分なdivを持っていることです。

<body> 
    <div id="bgTopDiv"> 
     content here 
    </div> 
</body> 

body{ 
    background-image: url(images/bg.png); 
} 
#bgTopDiv{ 
    background-image: url(images/bgTop.png); 
    background-repeat: repeat-x; 
}

出典

2012-05-08 13:42:40

問題は画像ではありません、事は、私は2つの画像が背景として動作する必要があります。 –

私の更新された答えを参照してください:) –

答えのためのthaanks、これは、ちょっとだけ、私の主な問題は、私はzのインデックスを使用してwasntしていた位置：絶対..これは比較的簡単です。 –

これも見てみると、http://www.w3schools.com/cssref/pr_pos_z-index.aspのほうがアイデアのほうが多く、さらに下の方でテストできます。

おかげで、デビッド

出典

2012-05-08 13:58:32

こちらをお読みください：http://w3fools.comより良いリソースがあります。私は長いことw3s前にも毒であった:)と悪い習慣を削除するために本当に苦労した。 –

のオーバーレイ画像と背景

答えて

関連する問題