Change width of background-image?

Question

I tried to change the width but it only changes the width of the div.
How can I change the width of the image using css?

#photoTable {
    background-image: url("Assets/Images/FrontImages/partyPhoto.jpg");
    height: 628px;
    vertical-align: top;
    width: 704px;
}

I'm pretty sure you can't do that in pure CSS, isn't editing the actual image an option? — Mathew Thompson, May 21 '12 at 21:16
@mattytommo yes it is. But I am asking whether is a solution without editing the actual image — EnexoOnoma, May 21 '12 at 21:18

score 2 · Accepted Answer · answered May 21 '12 at 21:17

2

Use the background-size property. You can set it either to a width and height, cover or contain. 100% 100% might be closest to what you want, though.

#photoTable {
    background-image: url("Assets/Images/FrontImages/partyPhoto.jpg");
    background-size: 100% 100%;
    height: 628px;
    vertical-align: top;
    width: 704px;
}

Doesn't work in IE 8 or below.

answered May 21 '12 at 21:17

Brilliand

13,404
6
46
58

For getting this to work in IE 8 and below, see the highest-voted (not accepted) answer to this question: http://stackoverflow.com/questions/2991623/make-background-size-work-in-ie – Brilliand May 21 '12 at 21:21

Change width of background-image?

1 Answers1