I'm very new to JavaScript.

My code so far:

$("#Stage").css(
  "background-image",
  "url(BG.jpg)",
  "background-attachment", 
  "fixed"
);

What I want to do is have the background image at a set size so lets say: width: 100% and height: 100%.

I'm very new to JavaScript.

My code so far:

$("#Stage").css(
  "background-image",
  "url(BG.jpg)",
  "background-attachment", 
  "fixed"
);

What I want to do is have the background image at a set size so lets say: width: 100% and height: 100%.

• javascript
• jquery
• css
• size
• width

3 Answers 3

You want to use background-size: 100%. Ensure that its browser support is patible with your supported platforms.

$("#Stage").css({ 
     "background-image": "url(BG.jpg)", 
     "background-attachment": "fixed",
     "background-size": "100%"
});

This worked for me (inside a slider):

<!-- CSS -->
<style>
    div.img { 
        background-repeat: no-repeat;
        background-position: center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    div.img:nth-of-type(1) {background-image: url('img.jpg');}
    div.img:nth-of-type(2) {background-image: url('img.jpg'); 
    }
</style>

<!-- HTML -->
<div class="img"></div>

This is just simple CSS, not jQuery. You can read more about background-size here: http://www.w3schools./cssref/css3_pr_background-size.asp