Yajo100 Yajo100 - 3 months ago 11
CSS Question

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

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 example, just a circle in the bottom right corner, or the top right portion?

Answer

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

<div class="main-background">
    <div class="demo-holder">
        <img class="img-size" src="http://i.imgur.com/OaE8VAj.jpg" />
        <div class="circle-div">Transparent<br />Effect</div>
    </div>
</div>

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