CSS show div background image on top of other contained elements

Question

Not sure if this is possible and how  but I tried playing around with the z-index of the elements in my code with no success   I have a div element that has a background image set in css   inside the div  i have other elements  like div and img   I am trying to have the main div that contains the background image stay on top  since I want that background image to show on top of the other elements  this background image has some rounded corners that I want to show on top of the image included in this div    Example HTML    lt div id  mainWrapperDivWithBGImage  gt      lt div id  anotherDiv  gt         lt  -- show this img behind the background image        of the  mainWrapperDivWithBGImage div -- gt         lt img src  myLargeImage jpg    gt      lt  div gt   lt  div gt    Example CSS      How can I make the bg image of this div show on top of other elements contained    Is this even possible       mainWrapperDivWithBGImage     background  url  myImageWithRoundedCorners jpg   no-repeat scroll 0 0 transparent    height  248px    margin  0    overflow  hidden    padding  3px 0 0 3px    width  996px

User · Accepted Answer

I would put an absolutely positioned  z-index  100  span  or spans  with the background  url  myImageWithRoundedCorners jpg    set on it inside the  mainWrapperDivWithBGImage

User · Answer

How about making the  lt div id  mainWrapperDivWithBGImage  gt  as three divs  where the two outside divs hold the rounded corners images  and the middle div simply has a background-color to match the rounded corner images  Then you could simply place the other elements inside the middle div  or    outside left width 10px  float left    outside right width 10px  float right    middle background-color  color of rnd crnrs foo gif  float left     Then  HTML    lt div id  mainWrapperDivWithBGImage  gt     lt div id  outside left gt  lt img src  rnd crnrs left gif    gt  lt  div gt     lt div id  middle  gt       lt div id  another div  gt  lt img src  foo gif    gt  lt  div gt     lt div id  outside right gt  lt img src  rnd crnrs right gif    gt  lt  div gt   lt  div gt    You may have to do position relative  and such

User · Answer

If you are using the background image for the rounded corners then I would rather increase the padding style of the main div to give enough room for the rounded corners of the background image to be visible   Try increasing the padding of the main div style    mainWrapperDivWithBGImage           background  url  myImageWithRoundedCorners jpg   no-repeat scroll 0 0 transparent         height  248px         margin  0         overflow  hidden         padding  10px 10px         width  996px       P S  I assume the rounded corners have a radius of 10px

[html] CSS show div background image on top of other contained elements

Examples related to html

Examples related to css

Examples related to z-index

Examples related to background-image