Is it possible to make certain parts of an image transparent in HTML5/CSS

Question

I want to have an image on my page that has certain parts that are transparent, but not all of it. Is it possible to make just certain parts of an image/div transparent? For

Answer 1

Here is another CSS option. It simulates a transparent area within an image by sharing a fixed background with background-size:cover on both the background and the circle. This technique also creates interesting effects when used for other html elements that can have a background like divs, headers, paragraphs...

JSFiddle

Main CSS

.main-background, .circle-div {
    background-image:url(http://i.imgur.com/1aAo20a.jpg);
    background-repeat:no-repeat;
    background-position:center top;
    background-attachment:fixed;
    background-size:cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
}

HTML

    

        
        
Transparent
Effect
    

Another suggestion would be to use the inline image as a background on "demo-holder".