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

Answer 1

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.

Answer 2

使用background-size属性（ 支持有限 ）。

Answer 3

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