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
4
-
stackoverflow.com/questions/376253/…Jawad– Jawad2011-07-27 14:39:33 +00:00Commented Jul 27, 2011 at 14:39
-
stackoverflow.com/questions/1150163/…Jawad– Jawad2011-07-27 14:39:54 +00:00Commented Jul 27, 2011 at 14:39
-
1css-tricks.com/766-how-to-resizeable-background-imageJawad– Jawad2011-07-27 14:40:10 +00:00Commented Jul 27, 2011 at 14:40
-
point taken. I did try to search, obviously not well enough ;)Mild Fuzz– Mild Fuzz2011-07-27 14:47:52 +00:00Commented Jul 27, 2011 at 14:47
Add a comment
|
3 Answers
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.
Comments
With the background-size property (which has limited support).
Comments
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;
}
