CODEWITHSUNDEEP
htmlcss
Abijah
Abijah

Reputation: 105

Placing an image behind a div

I'm trying to place an image (the bamboo) behind a div (contact form) using "z-index".

However, the image is pushing the div out of the way.

Page can be seen here: http://www.abijahchristos.com/sample/springspa

JsFiddle here: http://jsfiddle.net/Abijah/4n9LZ/

Upvotes: 0

Views: 2927

Answers (2)

gaurang171
gaurang171

Reputation: 9090

having background image in CSS is valid solution but just incase you dont want background use follwoing.

in case of position absolute you need to have a container with position relative otherwise it will position based on body top left corner.

.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;
}

Upvotes: 1

Kishore
Kishore

Reputation: 1912

you can use a background property to do it.

try this you do not need 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;
}

Upvotes: 1

Related Questions