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

    CSS - how to apply styles to first elements in a static generated list

    CSS hover transition - how to remove delay?

    form not showing up properly in chrome and IE6

    How to center a navigation bar properly? [closed]

    iphone - How to implement the effect of “float” for image, just like in CSS style

    How to stop a CSS rule from applying to a specific element [duplicate]

    How to only make a css element appear on one page?

    How to shift divs “up” in an order after deleting hiding a div with jquery/css

    How do i prevent my CSS affecting external plugins?

    How to overlay a dynamically selected image over a dynamically populated div

    Show div on hover span styling

    How to limit click area to text?

    How do you hide and show a background image using a carousel?

    How to encapsulate CSS, especially for popups and no iframe involved?

    How to position text in a div?

    How do you input CSS into an animate

    How to inject content of CSS file into HTML in Gulp? [closed]

    how to set a path to the static files which is surver independnet

    How can I use CSS, Javascript, or a Cookie to disable animation reply on back button?

    How to make a wavy border line to separate background images in html5/css?

    How to override w3.css for table border

    how to remove space from html using bootstrap

    How to make the float left and float right on the same line?

    How to refresh to top of HTML page using css

    How can I prevent a flex container from overflowing/underflowing?

    css - how to setup image editing page

    How to define `autocomplete=“off”` as a CSS style?

    How to add css 3dtransform property with jquery to a dom element?

    How come one of my columns in bootstrap is not functioning properly?

    Using CSS how best to display name value pairs?