Html – transparent png over div with css background image

background-imagecsshtmlpngtransparency

I am having troubles with HTML/CSS when combining a div with a fixed-background image together with a scrolling png with a transparent background.

What happens is that the div with the png picks up the background color of the page when it scrolls over the div with the fixed-background image. Here's an example where the body is red so it is clear what's going on.

Here is my markup:

<body bgcolor="red">
<div id="bkg"></div>
<div><img src="hands2.png"></div>
<div id="bkg2"></div>

and here is the css:

*{margin:0;padding:0;}
img{max-width: 100%;}
#bkg{background:url(danicool.jpg)repeat-x;background-attachment:fixed;height:650px;width:100%;}
#bkg2{background:url(danifreak.jpg)repeat-x;background-attachment:fixed;height:650px;width:100%;}

I tried adding background: transparent to every div that might effect things with no results.

Is it not possible to scroll over a fixed-background image with a png that has a transparent background?

Best Answer

Your problem is that the hands div is in flow, and taking space.

You want it to be out of flow, and so the 2 images are adjacent one to the other.

the easiest way to acieve this is settin position absolute (and then adjusting the position;

*{margin:0;padding:0;}

img{max-width: 100%;}

#bkg{
background:url(http://www.moutonotopia.com/transparency/danicool.jpg)repeat-x;
background-attachment:fixed;
height:650px;width:100%;}

#bkg2{
background:url(http://www.moutonotopia.com/transparency/danifreak.jpg)repeat-x;
background-attachment:fixed;
height:650px;width:100%;}

.hands {
    position: absolute;
  top: 400px;
   width: 900px;

}
<div class="body" bgcolor="red">
    <div id="bkg"></div>
    <div class="hands"><img src="http://www.moutonotopia.com/transparency/hands2.png"></div>
    <div id="bkg2"></div>

</body>

Related Topic