Scaling background images with CSS

Question

How does ones scale a background image with CSS? The image is attached with CSS, and I would like to scale it to fit a certain width

http://stackoverflow.com/questions/376253/stretch-and-scale-css-background — Jawad, Jul 27 '11 at 14:39
http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-background-with-css-only — Jawad, Jul 27 '11 at 14:39
http://css-tricks.com/766-how-to-resizeable-background-image/ — Jawad, Jul 27 '11 at 14:40
point taken. I did try to search, obviously not well enough ;) — Mild Fuzz, Jul 27 '11 at 14:47

score 7 · Accepted Answer · answered Dec 17 '11 at 07:11

You may try the following code:

.aboutpic {
width: 150px; /* replace 150px with something you need */ 
float: left;
background-image: url(../images/aboutpic.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
height: 139px; /* replace 139 px with something you need */
}

Then in the html just put:

<div class="aboutpic"></div>

It works. I tested it.

score 6 · Answer 2 · edited Jul 03 '13 at 17:13

6

With the background-size property (which has limited support).

edited Jul 03 '13 at 17:13

Rory O'Kane

29,210
11
96
131

answered Jul 27 '11 at 14:40

Quentin

914,110
126
1,211
1,335

score 0 · Answer 3 · answered Jan 14 '14 at 03:04

Javascript is a good way to start, "jquery.backstretch.js" is a very good jquery lib to scaling the background img.

Or, if your target client is using modern browser which means it can support CSS3, use this:

body{
background:url(background.jpg);
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

http://www.w3schools.com/cssref/css3_pr_background-size.asp

Scaling background images with CSS

3 Answers3