Skip to content
Advertisement

Change background-image size in javascript

I have been attempting to put a repeating background image on a website, with the basic CSS

background-image: url('url_here');
background-attachment: fixed;
background-repeat: repeat;

however, id like to be able to change the size of the image im using on refresh, using javascript. CSS has the function

background-size: 300px;

but unfortunately the COM style object doesnt – see here for what it can do for backgrounds. This leaves me with one option: using an HTML image that repeats itself, that i can then edit with the COM style object.

So, boiled down, my question is: is there a way to repeat an HTML image that is NOT a background image? Any help is greatly appreciatted.

Advertisement

Answer

Actually, you CAN affect the background size in javascript like so:

document.getElementById("el_id").style.backgroundSize = "100px 100px";

Check out this fiddle: http://jsfiddle.net/Lph2W/. The CSS sets the background image size to 200px X 200px, then the JS updates it to 100px X 100px.

User contributions licensed under: CC BY-SA
2 People found this is helpful
Advertisement