Background-Image einer Überschrift nicht vollständig zu sehen

[Vincent A.]

Hallo,
Ich bin gerade dabei eine kleine Seite zu entwerfen und möchte dabei die Überschriften durch ein Hintergrundbild ein wenig schöner gestalten.

Das ganze soll dann so aussehen wenn es fertig ist:

Immoment sieht es nur leider wie folgt aus:

Ich habe zwar eine feste Höhe angegeben für das background-image der klasse, jedoch wird es einfach nicht komplett dargestellt.
Eine min-height zu definieren hilft leider auch nicht; ich bin langsam wirklich ratlos.
Hat hier vielleicht jemand eine Idee?

Hier noch der dazugehöroge Quelltext:

HTML:~~~html

<div id="01ferienhaus">
   <a class="image01" href="images/01_image2.jpg"><span class="hidden">Das Ferienhaus</span></a>
   <span class="headline01">Das Ferienhaus</span>

<p>Neues, hochwertig und komfortabel eingerichtetes Ferienhaus bis 7 Personen.
   [...]
</div>

  
CSS:~~~css
  
.headline01 {  
font-weight: bold;  
color: #2e98de;  
background-image: url(images/01_head.jpg);  
background-repeat: no-repeat;  
width: 606px;  
height: 41px;  
}  
  
.hidden {  
display: none ;  
}  
  
.image01 {  
float: right;  
background-image: url(images/01_image1.jpg);  
width: 261px;  
height: 213px;  
}  
  

Liebe Grüße
Vincent