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, i.e. 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!**