How to set background size (height & width)?

Question

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%.

score 12 · Accepted Answer · answered Jun 27 '13 at 21:12

12

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

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

answered Jun 27 '13 at 21:12

alex

479,566
201
878
984

3

Thanks, that worked but for some reason "background-size": "100% 100%" doesn't work probably something to do with the program I am using - Edge Animate... any idea's of how to get both and height and width at 100% and stretch the image to the height and width..? – Chris Lad Jun 27 '13 at 21:17
I might be a little late, but for those who see this comment: background-size: 100% 100%; stretches the image to 100% height and width of the container, not the image. So if you want the image to keep it's initial dimensions you need to have set an "auto" for either width or height e.g. background-size: 100% auto; (stretch image to 100% width of the container and set height automatically by the ratio of the initial image dimensions). – Kathara Nov 21 '17 at 08:23

score 0 · Answer 2 · edited Dec 08 '20 at 04:45

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>

score -3 · Answer 3 · answered Jun 27 '13 at 21:09

-3

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

answered Jun 27 '13 at 21:09

Tim Wasson

3,606
16
16

How to set background size (height & width)?

3 Answers3