175x175 の背景画像がありますが、それを使って「CD」カバーを作ろうとしています。以下のコード ( jsFiddle が利用可能) では、サイズが変更されておらず、単に「トリミング」されていることがわかります。これを修正するにはどうすればよいですか?
HTML:
<div class="cd"><div class="hole"></div></div>
<p>I want the image above to be resized to 75x75... but it's not</p>
<img src="http://userserve-ak.last.fm/serve/126/23679395.jpg" alt="Test" />
<p>Actual image size above.</p>
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: 75px;
height: 75px;
position: relative;
border:1px solid #A1A1A1;
}
.cd .hole {
width: 20px;
height: 20px;
position: absolute;
background-color: #ddd;
border:1px solid #A1A1A1;
left: 28px;
top: 28px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}