Image mask CSS example

HTML

<div class="selected">
<img src="http://austese.net/sites/default/files/AustESELogoLarge.png" alt="Logo"/>
</div>
<p>The aim of the AustESE project is to develop a set of interoperable services to support the production of electronic scholarly editions by distributed collaborators in a Web 2.0 environment. 
</p>

CSS

.selected:before {
    content:""; 
    display:block; 
    width:100%; 
    height:100%; 
    position:fixed; 
    left:0px; 
    top:0px; 
    z-index:0; 
    background-color:black;
    opacity:0.5
}
.selected {
    height:200px;
    background-image: url(http://austese.net/sites/default/files/AustESELogoLarge.png);
    background-repeat:no-repeat;
}
/* Use CSS clip to display only a segment of the image (in this case Tasmania) */