Semi-Transparent div background on top of img tag

Question

How do I get a div background image to show above a img html tag. The reason for wanting to do this is for a semitransparent texture that overlays rotating images in a banner. I don't want to have to cut the texture with the image each time. That way adding/updating images in the future would be faster. I have tried the advice given in this post, but did not seem to work: CSS show div background image on top of other contained elements. Thanks for any help.

html:

<div id="sliderFrame">
    <div id="slider">
        <span id="slider-background">
            <img src="/_images/rotating-banner/001.jpg" />
        </span>
    </div>
</div>

CSS:

#sliderFrame {position:relative;width:850px;margin: 0 auto;} 

#slider {
  width:850px;height:470px;/* Make it the same size as your images */
  background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
  position:relative;
  margin:0 auto;/*make the image slider center-aligned */
  box-shadow: 0px 1px 5px #999999;
}

#slider-background{
  position:absolute;
  background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
  width: 850px;
  height: 470px;
  z-index: 100;
}

link to live site: http://lltc.designangler.com/

score 1 · Answer 1 · answered Nov 06 '13 at 19:14

try:

HTML:

<div id="wrapper">
    <div id="img"></div>
    <div id="overlay"></div>
</div>

CSS:

#wrappaer{display:inline-block; position:relative; width:100px; height:100px;
     box-shadow: 0px 1px 5px #999999;}
#img{display:block; position:absolute; z-index:1}
#overlay{display:block; position:absolute; z-index:2
     opacity:0.3;
     filter:alpha(opacity=30); /* For IE8 and earlier */}

make sure to adjust wrapper,img and overlay sizes, add your images etc'.

deweyredman · Answer 2 · 2013-11-06T19:07:39.627

0

have you tried setting the opacity of the div element? Edit: After rereading your question, I believe this may not be what you're looking for. Have you tried explicitly setting the z-index of the slider element in the CSS as well?

edited Nov 06 '13 at 19:07

answered Nov 06 '13 at 18:59

deweyredman

1,440
1
9
12

I did, but the issue is that the div background has the transparency and the image does not. That is why I would like the div background image on top of the img tag. – Phorden Nov 06 '13 at 19:04
Check out this site: http://css-tricks.com/snippets/css/transparent-background-images/ It has editable code as well... – deweyredman Nov 06 '13 at 19:22

score 0 · Answer 3 · answered Nov 06 '13 at 19:59

I finally solved the issue by using an img of the background inside a div instead of making it a background image. My updated code is below:

<div id="sliderFrame">
<div id="overlay"><img src="/_images/marqueeLayout/MarqueeTexture.png" /></div>
    <div id="slider">
        <img src="/_images/rotating-banner/001.jpg" />
    </div>
</div>

CSS:

#overlay{
  display:block;
  position:absolute;
  width: 850px;
  height: 470px;
  z-index: 2;
}

score 0 · Answer 4 · answered Nov 06 '13 at 20:34

The background image, as its name suggest, can never be in front of the child elements. Therefore, you will need to rely on absolute positioning to overlay that background image over the slideshow:

#sliderFrame {
    position: relative;
    width: 850px;
    margin: 0 auto;
}
#slider {
    width:850px;
    height:470px;
    background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
    position:relative;
    margin:0 auto;
    box-shadow: 0px 1px 5px #999999;
}
#slider-background {
    display: block;
    position: relative;
    width: 850px;
    height: 470px;
    z-index: 100;
}
#slider-background:before {
    background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
}
#slider-background img {
    display: block;
}

I have chosen to use a pseudo element that is positioned absolutely over the #slider-background element itself, and it is stretch to the element's dimension by setting all four offsets to 0. Remember that you will also need to declare the #slider-background and its child <img> element as block-level elements.

http://jsfiddle.net/teddyrised/XJFqc/

Semi-Transparent div background on top of img tag

4 Answers4