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:

<div id="mainWrapperDivWithBGImage">
   <div id="anotherDiv">
      <!-- show this img behind the background image 
      of the #mainWrapperDivWithBGImage div -->
      <img src="myLargeImage.jpg" />
   </div>
</div>

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

If the background image of the main div is displayed on top, it would hide the inner elements beneath it and the child elements will be useless. Are you sure? — Chandu, Dec 29 '10 at 18:22
That's a good point! I guess this will not work, at least nested the way I have it ... — IntricatePixels, Dec 29 '10 at 18:25
@Cyber It sounds like the background image is not taking up the entire fill of the background div. Just a little piece of it. — JakeParis, Dec 29 '10 at 18:25

score 19 · Accepted Answer · answered Dec 29 '10 at 18:24

19

I would put an absolutely positioned, z-index: 100; span (or spans) with the background: url("myImageWithRoundedCorners.jpg"); set on it inside the #mainWrapperDivWithBGImage .

answered Dec 29 '10 at 18:24

JakeParis

11,056
3
42
65

2

@user If you do this, be sure to set the wrapper div as ` position: relative; ` – JakeParis Dec 29 '10 at 18:26
Yep this worked ... but I had to make the background image a transparent png so that content inside it was displayed. Thanks! – IntricatePixels Dec 29 '10 at 18:56
@user55 better than making the background a transparent image, declare ` background: transparent `. That way the browser has one less item to download. – JakeParis Dec 29 '10 at 18:59
@JMC Creative actually background transparent would not work in my case since I have a frame PNG with 3px borders with rounded corners. The content then is showing inside the PNGs transparent area. However, a new issue I'm running into is that now my a links inside the div are not clickable because the absolute positioned span i placed inside #mainWrapperDivWithBGImage is now on top of everything else, so links don't work. I changed the a link z-index to show on top but then the images inside the a links show on top of the span with the transparent PNG – IntricatePixels Dec 30 '10 at 16:37
@taulant Something I don't understand (and @Cybernate already mentioned this): Why do you want the _background_ image to be _in front_ of the links? It sounds like you need to think through how you want this layered. It doesn't make sense (at least without seeing your project) to put an image *on top* of a link and then complain that you can't click the link... ? Do you have a link you can share to see the whole thing in context? – JakeParis Dec 30 '10 at 16:54
@taulant: Are you putting all 4 corner images in _one_ span, but wanting the center of that big span to be invisible? That's not the best solution. I would instead create 4 individual spans, one for each corner. – JakeParis Dec 30 '10 at 16:56
Thanks ... I think that's exactly what I'm doing and that's why I'm running into issues (using bg image on top, then links don't work). I'm going to change my whole set up. Unfortunately the project is not live and in a secure area so I can't share it for now. Are you saying I should create a span for each corner and absolute position all four? – IntricatePixels Dec 30 '10 at 18:34
Can someone please give the code? What does "set on it" mean? – Pratik Poddar Oct 04 '12 at 06:31
@Pratik, by "set on it", I mean add `background: url("myImageWithRoundedCorners.jpg");` to the css rule for that element. The code is all written above. :) – JakeParis Oct 04 '12 at 13:15
yes the code would have been great. The final solution. – user18490 Jul 17 '14 at 15:18

score 0 · Answer 2 · answered Dec 29 '10 at 18:29

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.

score 0 · Answer 3 · edited Oct 24 '12 at 07:39

How about making the <div id="mainWrapperDivWithBGImage"> 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:

<div id="mainWrapperDivWithBGImage">
  <div id="outside_left><img src="rnd_crnrs_left.gif" /></div>
  <div id="middle">
    <div id="another_div"><img src="foo.gif" /></div>
  <div id="outside_right><img src="rnd_crnrs_right.gif" /></div>
</div>

You may have to do position:relative; and such.

https://www.w3docs.com/snippets/css/how-to-position-one-image-on-top-of-another-in-html-css.html This article had a solution that worked for me when the above options did not work... — Isaac Tait, Apr 19 '22 at 18:26

CSS show div background image on top of other contained elements

3 Answers3

Linked