How do you adjust the background-image size with CSS? [duplicate]
How do you adjust the background-image
's size with CSS?
You can use CSS3's background-size
property
Here's the code to make it work in every browser that supports it
.foo {
background-image: url(bg-image.png);
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
-webkit-background-size: 100% 100%; /* Safari 3.0 */
background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
-moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) */
}
You might consider using the jQuery plugin Backstretch.
This is how you do it. For all browsers.
body
{
background-image:url('../back.jpg');
background-repeat:no-repeat ;
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
-webkit-background-size: 100% 100%; /* Safari 3.0 */
background-size: 100% 100%; /* CSS3-compliant browsers */
-moz-border-image: url(../back.jpg) 0;
background-size: cover; /* Gecko 1.9.1 (Firefox 3.5) */
}
Aside from CSS3, it seems for previous level(s) (i.e. the standard) the only way is to craft your image the right size and set its background-position and background-repeat properties
You could use the background-size
CSS property;
however, it's worth noting that older versions of browsers may not support this.
Another approach is to create a new <div>
element with position:absolute
and a low z-index
so it is behind the other relevant elements. You can then use this div for the background image and re-size it to the required dimensions independently of the main element in front of it.
精彩评论