CODEWITHSUNDEEP
javascripthtmlcss
sazr
sazr

Reputation: 25938

Get an img to display below/behind a div

I have a menu button. The main blue outline is meant to sit above the image but right now the blue border is behind the image.

Can you help me figure out what I need to do to get the image behind the blue border?

I cut the blue border into 2 sections, the top & the bottom. The bottom is a tall image, so that the border can grow/be large for tall images.

This is how the buttom is meant to look:

http://img202.imageshack.us/img202/7940/capturetxr.png

This is how it currently looks:

http://img717.imageshack.us/img717/3051/capture2lf.png

My Code:

<div class="buttonTop">
    <div class="buttonBottom">
        <img class="buttomImg" src="images/ButtonImages/sweets2.jpg" width="150px" height="105px" alt=""/>
    </div>
</div>

.buttonTop { 
    background: url(../images/dinnersButton.png) 0 top no-repeat; 
    padding-top: 73px; 
    display: block; 
    width: 153px; 
    height: 113px;
    margin: 0px auto; 
}

.buttonBottom { 
    background: url(../images/buttonBottomLite.png) 0 bottom no-repeat; 
    padding: 0px 2px 5px 2px; 
    display: block; 
    height: 109px;
    z-index: 2;
}

.buttomImg {
    z-index: 0;
}

Upvotes: 0

Views: 272

Answers (2)

Sparky
Sparky

Reputation: 98758

The methodology is flawed. You cannot put something inside a div while at the same time expect it to appear behind that div. Your div has a background image and anything you put inside it will cover the background, period.

You need to re-think the whole thing... each of the three items in their own div all within another div used as a container. Then you can put the image div behind (under) the border div.

EDIT:

The following jsFiddle shows how to put three div's in a container, while having the second two cover the first. The two div's are transparent to simulate your transparent border PNG which also allows you to see the div behind. The red div behind is supposed to represent your photo and it's set to position: absolute and bottom: 0.

http://jsfiddle.net/sparky672/a9cX8/

Upvotes: 1

David
David

Reputation: 4361

<div class="round_border">
<img src="" alt="" />
</div>

--- CSS
.round_border {
padding: 5px;
border: 5px solid blue;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}

That should work in most modern browsers.

Upvotes: 1

Related Questions