How to adjust background image size using CSS?

Question

How to adjust size background-imageusing CSS?

Answer 1

You can use jQuery Backstretch plugin .

Answer 2

You can use CSS3 property background-size

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) */
}

Answer 3

CSS3, , (, ) -

Answer 4

CSS background-size.
, .

Another approach is to create a new element <div>with position:absoluteand low z-index, so it is behind the other relevant elements. Then you can use this div for the background image and resize it to the required size regardless of the main element in front of it.

Answer 5

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) */
   }