background image not showing underneath div

Question

The banner on this page here (a work in progress), has the following structure

<div id="top">
  <div class="sidebox">
    <div class="boxhead">
      <h2>Chalets des Bouleaux</h2>
    </div>
    <div class="boxbody">
      <p>Tel. 819-444-4444</p>
      <p>Notre-Dame de Pontmain, Québec, Canada</p>
    </div>
  </div>
</div>

The div with class sidebox and all it's child elements make up the logo shown in the centre of the banner. The photo shown behind the banner is a background image of the top div. I would like the logo to appear as though it is floating on top of the photo, ie the photo shows through the white parts of the logo. Obviously this isn't happening at the moment, though I'm unsure why, because I've set the background color to transparent for all the elements of which the logo is composed.

---

Update:

The page that I linked to has changed so I've removed the link to avoid confustion. Please ignore this question and vote to close it!

Answer 1

The background of your GIFs are white! Make them transparent!

Answer 2

 <div id="top" style="background-image:url(backgroundimagepath)">
  <div class="sidebox">
    <div class="boxhead">
      <h2>Chalets des Bouleaux</h2>
    </div>
    <div class="boxbody">
      <p>Tel. 819-444-4444</p>
      <p>Notre-Dame de Pontmain, Québec, Canada</p>
    </div>
  </div>
</div>

Change it in this way and also sidebox should have a transparent background.

Answer 3

You need to replace the images of the sidebox with ones that have transparent backgrounds.

These images:

images/sbbody-r.gif
images/sbhead-r.gif
images/sbbody-l.gif
images/sbhead-r.gif

Answer 4

The following images will need to be recreated as 24-bit PNG's with semi-transparent backgrounds:

• sbhead-l.gif
• sbbody-l.gif
• sbbody-r.gif
• sbhead-r.gif

If you need the transparency in IE6 then you should use something similar to SuperSleight to patch up the holes.