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 implement fade in effect for CSS checkbox

    How to change background Image sizing

    How to make a gallery

    How to make first page fullscreen and others not [closed]

    How to add css class to style.css?

    How to scale down retina image sprite with css

    How to retain rectangular border around button when clicked

    How to add bootstrap css to my Wordpress plugin

    How to set ID or css selector for new row added in table using javascript

    CSS: how can I make this table fit the border when resized?

    How can I vertically align text within a span element, or make the span the same size as the text?

    How does this pure CSS tab work?

    How do I fix an HTML panel to the page after it hits the top of the viewport?

    In firebug, how do I find out all of the css styles being applied to a particular element?

    CSS How to create a container with non-linear borders

    How to import a css file in a react component?

    How to properly align icon and text in a table?

    How to make an empty div or container glow with pure CSS?

    CSS: show only the last x items in a list

    How do I position a div below an image with changing height?

    How do you set a css class attribute with Javascript? [duplicate]

    How can I format outer table but not inner table

    show hover by default using CSS

    How do I draw a line in CSS that starts wide and ends in a point [duplicate]

    how to make form input in middle

    How to know if an element is rendered?

    how to move this navigation bar to the right

    CSS - How to resize texboxes with background image when browser is resized?

    How to remove hover effect from a column of a table

    How to implement conditional CSS in this situation?