如何在javascript中更改主体背景图片大小？

Question

I'm trying to fit my 'body' background image to the browsers document size. This code here doesn't change anything in browser when i run it... i see the image but it is repeated twice and the size isn't changing. when debugging i see that the width and height variables are correct but nothing actually happens.... any ideas?

 $(function() { // onload...do var width = $(document).width(); var height = $(document).height(); $('body').css.backgroundSize = "" + width + "px " + height + "px"; }); 

 body{ background: url(../images/MainMenuScreen.jpg); } 

Answer 1

Try this:

#yourdiv /* with CSS 3 */
{  
 background: url(../images/MainMenuScreen.jpg) no-repeat;
 background-size: 100%;
}

Answer 2

You can use the background-size:cover property. Using "background-size:cover" property will give you the following advantages: 1. It Fills entire page with image, no white space 2. Scales image as needed 3. Retains image proportions (aspect ratio) 4. Image is centered on page 5. Does not cause scrollbars 6. As cross-browser compatible as possible

Here is the css (if you want it to apply to the entire page) :

html { 
background: url(../images/MainMenuScreen.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Hope this helps