Leaflet: wrestling with divIcon

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

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 id="map" style="height:480px; width:360px;"></div>

CSS

.my-div-icon
{
background: red;
}

JavaScript

var map = L.map('map').setView([51.5, -0.09], 13);

var myIcon = L.divIcon({ 
    iconSize: new L.Point(50, 50), 
    html: 'foo bar',
    className: 'my-div-icon'
});


L.marker([51.51, -0.09], {icon: myIcon}).addTo(map);