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


Tags: html,css

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.

  1. 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.


    CSS Howto..

    How to make nav menu fall onto the page?

    Vim: How would I recursively run “:sort” for everything between curly braces?

    How to set two directions for flex-box css?

    How to add separate style to google.visualization.DataTable without changing its own styles

    How to cancel CSS effect in Responsive Website Footer menu?

    How to move an image upwards in html/css

    Confusion as to how clearfix actually works

    How can I get as much of the text into a DIV row as possible?

    How to make image clickable if -1 z-index is given to create box-shadow?

    How to extend the background of a CSS-arrow to the whole page width?

    How to create CSS with 2 loops

    How do I center a character in a box using CSS?

    CSS how to have two divs to the right of one div but not beside each other

    How bad is to store all background images in CSS?

    How to Display a div on mouse-over using jquery ?

    how to add multiple images to a css header?

    css how to make full height div with scroll support?

    How to apply custom size to text field in rails

    How can I change the font (family) for the labels in Chart.JS?

    How to slide a div out

    How to combine this css?

    How to dynamically colour svg images in a webpage? [duplicate]

    How to use toggle css classes on an element onclick?

    how to validate IE 7/8 CSS hacks?

    How to make a hyperlink navigation bar active in CSS or javascript?

    How to reduce font weight in Firefox on Mac with CSS?

    How can I set a css property to tags with specific attribute?

    How can I use CSS to position an image on the rightmost side?

    Unsure how to use border-bottom in CSS

    How to make div disappear when image is placed over it?