how to show background image(multiple) if out of current div

Problem :

containerdiv has two images, I make them display left and right:

 .container {
  background-image: url('img/left.png'),url('img/right.png');
  background-position: left,130px;
    overflow: visible;//this line doesn't work
  }

currently, right.png is out of the right boundary of the container div and is hidden behind another named div2 which is at the right side of the container div.

How to make right.png image display on top of div2? see below structure:

[left.png------ 'I am container div'--------- ][right.png-----I am div2 -------]

for some reason, it is not possible to change the css of div2, so I am wondering if it is possible to set some attribute inside container div then right.png can show up.

see below I draw a picture: I set right.png 125px to show, ideally, it would cover the grey triangle.

Can not add padding to the container, can not change position of div2 (because there are other menus share this part, whole part of container div would turn grey if other menu was clicked.)

enter image description here

Solution :

Is div2 positioned absolute? If so, you can only place .container higher by positioning it absolute as well and setting the z-index higher than div2, or by placing .container after div2 in the DOM.

Try this: function clicka(num) { var nav = document.getElementById('navbar'), c = nav.children, l = c.length, i; for( i=0; i<l; i++) c[i].className = "unactive"; document.getElementById(num).className = "active"; } // <ul id="navbar"><li...>...</li></ul>...