Yajo100 Yajo100 - 1 year ago 88
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 Source

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...


Main CSS

.main-background, .circle-div {
    background-position:center top;


<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>

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download