setting width and height for background using css

Question

I want to set background width and height of the image.

document.getElementById('outerModalPopupDiv').style.backgroundImage = "url('samandar_003.jpeg')";
document.getElementById('outerModalPopupDiv').style.backgroundRepeat = "no-repeat";

Now I want to set Image width and height. I know background-size: 200px 50px; set height and width, however I can't use the same. I have to set the width and height in above format.

If I use

document.getElementById('outerModalPopupDiv').style.background.size = "200px 500px";

it won't work. Image remain same as it is.

Any idea how can I make this working.

Answer 1

As seen here, the js syntax for CSS3's background-size is:

object.style.backgroundSize="60px 80px"

So, for the sake of copypasting comfort, try this:

document.getElementById('outerModalPopupDiv').style.backgroundSize = "200px 500px";

Answer 2

with css3 you can set the Background-size:

#outerModalPopupDiv {
    background-size: 200px 500px;
}

as you can see here

alternatively if you want to set it with javascript you can create a css class and add the class to an element

javascript:

document.getElementById("outerModalPopupDiv").className += "resizeBg200x500";

css:

.resizeBg200x500 {
    background-size: 200px 500px;
}

or directly with javascript:

document.getElementById("outerModalPopupDiv").style.backgroundSize="200px 500px";

or another alternative with jQuery :)

$("#outerModalPopupDiv").css("background-size","200px 500px");

background-size is css3, but widely supported by many browsers as you can see here

Answer 3

Personally I'd make a class with the re sizing in and the add that dynamically using JS

http://jsfiddle.net/spacebeers/FFeEh/15/

document.getElementById('outerModalPopupDiv').style.backgroundRepeat = "no-repeat";

var element = document.getElementById('outerModalPopupDiv');

element.className += element.className ? ' backgroundResize' : 'backgroundResize';​