How do you adjust the background-image size with CSS? [duplicate]

This question already has answers here: Stretch and scale CSS background (16开发者_如何转开发 answers) Closed 8 years ago.

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.