setting width and height for background using css
-
12-12-2019 - |
문제
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.
해결책
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";
다른 팁
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
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';