change background using javascript

Question

I have to change the background of a div using JavaScript. I have managed to do that, using document.getElementById('test').style.background = "url('img/test.jpg')";

Now, how do i change other properties like repeat, scroll,etc?

The css i want for the test is like

background: #f00 url('img/test.jpg') no-repeat fixed 10px 10px;

I cannot use jQuery, since I do not want to include the library for only a small thing.

Ivan · Accepted Answer · 2011-09-21 09:16:24Z

4

Instead of setting all the css properties with javascript. I would suggest to create an additional css rule for this element with certain class. And then use javascript to add or remove this class from this element when you need it.

Eg.

function changeBG(){
  var element = document.getElementById('test');
  element.setAttribute("class", 'newBG'); //For Most Browsers
  element.setAttribute("className", 'newBG'); //For IE; harmless to other browsers.
}

answered Sep 21, 2011 at 9:16

Ivan

3,66720 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

VinayC · Accepted Answer · 2011-09-21 09:17:46Z

2

Below should work:

document.getElementById('test').style.background = "#f00 url('img/test.jpg') no-repeat fixed 10px 10px"

Or you can use individual properties such as backgroundColor of style object. See here for various properties of style object.

answered Sep 21, 2011 at 9:17

VinayC

49.6k7 gold badges64 silver badges74 bronze badges

Comments

Musaab · Accepted Answer · 2011-09-21 09:16:20Z

1

Make a class with those properties, and then just assign/remove that class through javascript.

answered Sep 21, 2011 at 9:16

Musaab

1,6143 gold badges19 silver badges37 bronze badges

Comments

Brij · Accepted Answer · 2011-09-21 09:17:15Z

1

function displayResult()
{
document.body.style.background="#f3f3f3 url('img_tree.png') no-repeat right top";
}

See following:
http://www.w3schools.com/jsref/prop_style_background.asp

answered Sep 21, 2011 at 9:17

Brij

6,1329 gold badges45 silver badges69 bronze badges

Comments

Muhammad Usman · Accepted Answer · 2011-09-21 09:22:11Z

0

As everyone suggests I also prefer using a class, but if you insist you can use JS for this as you use CSS

document.getElementById('test').style.background = "url('img/test.jpg') no-repeat fixed";

answered Sep 21, 2011 at 9:22

Muhammad Usman

12.5k6 gold badges38 silver badges60 bronze badges

Comments

Andrew D. · Accepted Answer · 2011-09-21 09:33:10Z

Use next style properties for changing background:

document.getElementById('test').style.background
document.getElementById('test').style.backgroundAttachment
document.getElementById('test').style.backgroundClip
document.getElementById('test').style.backgroundColor
document.getElementById('test').style.backgroundImage
document.getElementById('test').style.backgroundOrigin
document.getElementById('test').style.backgroundPosition
document.getElementById('test').style.backgroundPositionX
document.getElementById('test').style.backgroundPositionY
document.getElementById('test').style.backgroundRepeat
document.getElementById('test').style.backgroundSize

http://msdn.microsoft.com/en-us/library/ms535240%28v=vs.85%29.aspx

dhinesh · Accepted Answer · 2011-09-21 09:17:15Z

-1

This will give the class to the dom element

document.getElementById('test').className = 'cssName'

answered Sep 21, 2011 at 9:17

dhinesh

4,8142 gold badges28 silver badges44 bronze badges

Collectives™ on Stack Overflow

change background using javascript

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related