Resizing a background image via CSS

Question

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 "cropped". How do I fix this?

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

Please do some research first: developer.mozilla.org/en/CSS/background-size — Derek 朕會功夫
– Derek 朕會功夫, Commented Jun 12, 2012 at 5:59

McGarnagle · Accepted Answer · 2012-06-12 06:10:38Z

6

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

edited Jun 12, 2012 at 6:10

answered Jun 12, 2012 at 5:58

McGarnagle

103k31 gold badges235 silver badges264 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Derek 朕會功夫 · Accepted Answer · 2012-06-12 06:01:16Z

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/

edited Jun 12, 2012 at 6:01

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

answered Jun 12, 2012 at 5:59

Viezevingertjes

1,5771 gold badge14 silver badges26 bronze badges

Comments

SVS · Accepted Answer · 2012-06-12 06:05:58Z

1

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

answered Jun 12, 2012 at 6:05

SVS

4,2651 gold badge25 silver badges28 bronze badges

1 Comment

arttronics Over a year ago

+1 here is the jsFiddle I was about to post as an answer.

Collectives™ on Stack Overflow

Resizing a background image via CSS

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related