Question

Let’s say I have an image of this size:

Using CSS3 and whatnot, is there a way I can make it into like a CD? You know with the whole in the middle (preferably transparent) and round edges and what not.

Answer 1

I’m not sure about a transparent middle, but this will give you the CD shape (http://jsfiddle.net/CkYcN/):

HTML:

<div class="cd">
    <div class="hole"></div>
</div>

CSS:

.cd {
    -moz-border-radius: 63px;
    -webkit-border-radius: 63px;
    border-radius: 63px;
    background-image: url('http://userserve-ak.last.fm/serve/126/23679395.jpg');
    width: 126px;
    height: 126px;
    position: relative;
}

.cd .hole {
    width: 30px;
    height: 30px;
    position: absolute;
    background-color: #fff;
    left: 48px;
    top: 48px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}