CODEWITHSUNDEEP
jqueryhtmlcss
AnchovyLegend
AnchovyLegend

Reputation: 12538

Creating a square black div with a transparent circle in the middle

I am trying to create a square div with a transparent circle in the middle. Behind this div there will be an image and the transparent circle will act as a 'window' to this image in the background.

Here is a working example: http://caavadesign.com/

This is what I tried, with no success:

<div style="width:100%; height:550px; float:left; background:#aaa;">
    <div style="width:250px; height:250px; margin:150px auto; border-radius:125px; background:transparent; border:1px solid #000;">
    </div>
</div>

I appreciate any advice on how to accomplish this

Thanks in advance

Upvotes: 0

Views: 915

Answers (2)

jmore009
jmore009

Reputation: 12923

this absolutely can be done in css, just create a circle and set the background-position to fixed:

.window{
  background: url("http://upload.wikimedia.org/wikipedia/commons/5/52/New_York_Midtown_Skyline_at_night_-_Jan_2006_edit1.jpg") center no-repeat fixed;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

FIDDLE

UPDATE USING YOUR CSS:

NEW FIDDLE

Upvotes: 1

B-rad
B-rad

Reputation: 186

they are using a background image

http://caavadesign.com/wp-content/themes/caava/img/section1_mask.png

Upvotes: 1

Related Questions