Resizing A Background Image Via CSS

I have this background image that is 175x175 but I am trying to make a 'CD' cover out of it. In the code below (jsFiddle available), you will see it is not resized but merely 'crop

Solution 1:

Use the background-size CSS property:

background-size: 75px 75px;

Alternatively:

background-size: 100% 100%;

There's also the shorthand background property:

background: url('http://userserve-ak.last.fm/serve/126/23679395.jpg') 100% 100%;

Solution 2:

Use background-size like here:

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

Example: http://jsfiddle.net/5CDnw/6/

Solution 3:

Use background-size:cover it will fill the container whatever will be the size of container.

.cd {
    -moz-border-radius: 63px;
    -webkit-border-radius: 63px;
    border-radius: 63px;
    background-image: url('http://userserve-ak.last.fm/serve/126/23679395.jpg');
    background-size:cover;/*Add This*/
    -webkit-background-size: cover;/*Add This for webkit*/
    -moz-background-size: cover;/*Add This for mozilla*/
    -o-background-size: cover;/*Add This for opera*/
    width: 75px;
    height: 75px;
    position: relative;
    border:1px solid #A1A1A1;
}