Javascript: Change backgroundPosition for two background images on one element

Question

My Problem: I have two background images on the body tag one floating left and one right. The left image has a left padding of 50px and the right image has a right padding of 50px. I need to change the left padding for the left image and the right padding for the right image via javascript (not jquery).

Thanks for your help! :)

#body{
      background:url('http://www.w3schools.com/css/w3css.gif') no-repeat 50px 0px,
      url('http://www.w3schools.com/css/w3css.gif') no-repeat top right 50px;
}

score 1 · Accepted Answer · answered Jul 01 '13 at 20:34

1

Use this

document.getElementById('body').style.backgroundPosition = '150px 0, 100px 0';

The first 150px 0 is for the left image and 100px 0 is for the second image.

Here is a fiddle: http://jsfiddle.net/enve/9a32b/

answered Jul 01 '13 at 20:34

Idrizi.A

9,819
11
47
88

1

This works, I should of known to just use a comma. Maybe I drank too much coffee today. :) Thanks! – Bowser Entertainment Jul 01 '13 at 20:36

score 0 · Answer 2 · edited May 23 '17 at 12:28

0

Give the tag an id like id="body" then,

document.getElementById("body").style["padding-left"] = "50px"; document.getElementById("body").style["padding-right"] = "50px";

see this stackoverflow question

edited May 23 '17 at 12:28

Community

1
1

answered Jul 01 '13 at 20:34

Nikola

817
13
19

Javascript: Change backgroundPosition for two background images on one element

2 Answers2