CODEWITHSUNDEEP
javascriptcss
Bowser Entertainment
Bowser Entertainment

Reputation: 15

Javascript: Change backgroundPosition for two background images on one element

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;
}

Upvotes: 0

Views: 449

Answers (2)

Nikola
Nikola

Reputation: 827

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

Upvotes: 0

Idrizi.A
Idrizi.A

Reputation: 12060

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/

Upvotes: 1

Related Questions