Leaflet: wrestling with divIcon

Prompted by a question to the leaflet google group concerning sizing, and assigning a background image to, a divIcon.

by FranceImage

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css">
<div>

<div id="map" style="height:480px; width:360px;">
 
</div>
 <div style="pointer-events: none; position: absolute; top: 100px; left: 100px ; z-index: 100">
  foo bar
  </div>
  
  </div>

CSS

.leaflet-div-icon
{
    background-image: url('http://cloudmade.com/images/layout/cm-logo.png');
}

JavaScript

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([51.5, -0.09], 13);


// add a marker in the given location, attach some popup content to it and open the popup
L.marker([51.49, -0.09]).addTo(map)
    .bindPopup('Demo CSS3 popup. <br> Easily customizable.');


var myIcon = L.divIcon({ 
    iconSize: new L.Point(50, 50), 
    html: 'foo bar',
    className: 'my-div-icon'
});
// you can set .my-div-icon styles in CSS

L.marker([51.51, -0.09], {icon: myIcon}).addTo(map)
    .bindPopup('divIcon CSS3 popup. <br> Supposed to be easily stylable.');