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 make this div at the bottom of another div [duplicate]

    How can I allow resizable() to increase size beyond initial size?

    CSS - want to remove a blank space but have no idea how to get rid of it?

    How to make a website run faster?

    How to design aggregations filter in css for week, month?

    CSS how to change text color of disabled option inside a select?

    how to set equal font size in table cells for mobile device html pages

    How to move last li to right most side CSS

    How to create readonly textbox-like structure using html (div/span) and css?

    CSS : How can I add shadow to a label or box

    White space in between banner image and menu bar on site-only 1080px screen and lower. How to fix? [closed]

    CSS how to align group of elements horizontally?

    How to scale canvas and keep its position on screen?

    How to get an input set to display block to fade in with css

    How do I move the search bar to the top without hiding it? [closed]

    How to create a fixed menu (links come from right to left) - HTML & CSS

    How to have two background-images with CSS? [duplicate]

    How to apply css inside a text that is either any html control or without any html control

    How to display thick line under header of sub menu using css

    How to use a variable for a path with Stylus?

    How can I make my website width fit fully on iphone 5?

    How to place output from an external php file to a specific place on the page

    How to control size of list-style-type disc in CSS?

    How to fix a 3x3 block of images with CSS

    How to get rid of CSS cascading in internal element widgets

    how to apply jquery ui/css to forum field

      list only showing contents of first
    • , ignoring second

    Hide one div when showing another with JavaScript

    How to force elements to stay in the same row

    how to achieve following using css ( digits input )