html - div の後ろに画像を配置する

Question

「z-index」を使用して、div (連絡先フォーム) の背後に画像 (竹) を配置しようとしています。

ただし、画像はdivを邪魔にならないようにしています。

ページはこちら: http://www.abijahchristos.com/sample/springspa

JsFiddle はこちら: http://jsfiddle.net/Abijah/4n9LZ/

Answer 1

CSSに背景画像を含めることは有効な解決策ですが、背景を使用したくない場合に備えて、次のようにします。

絶対位置の場合は、相対位置のコンテナが必要です。そうでない場合は、ボディの左上隅に基づいて配置されます。

.copy_right {
position:absolute;
top:0;
width: 310px;
height: 310px;
border: 2px solid #CCC;
margin: 0 25px 0 30px;
padding: 5px 0 0 0;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 3px 10px;
-moz-box-shadow: rgba(0,0,0,0.3) 0 3px 10px;
box-shadow: rgba(0, 0, 0, 0.3) 0 3px 10px;
z-index: 2;
}

#bamboo {
position: absolute;
z-index: 1;
right: -17px;
top: 0;
}

Answer 2

background プロパティを使用してそれを行うことができます。

これを試してみてください。z-indexは必要ありません

.copy_right {
    background: url("../images/bamboo1.png") repeat scroll 0 0 transparent;
    border: 2px solid #CCCCCC;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    float: left;
    height: 310px;
    margin: 0 25px 0 30px;
    padding: 5px 0 0;
    width: 310px;
    z-index: 2;
}