how to show background image(multiple) if out of current div
Tags: html,css
Problem :
container
div 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 ofcontainer
div would turn grey if other menu was clicked.)
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.