Question

I have two divs in a container, the right div has a background image. I want to move the background image of right div so that some part (eg. 20px) of it appears in the left div. Is it possible for example using z-index etc? I have tried setting background image position to -20px but its not visible.
Please have a look at jsfiddle: http://jsfiddle.net/k8d6U/1/

Answer 1

The background image will only appear within the boundaries of the element, so you can do this if your right-aligned div overlaps your left-aligned div by the 20 pixels that you want.

Alternatively, you can set the background image of the right div to -20px like you said, but then apply the same background image to the left div and position it 20 pixels from the right. This will give the effect that you’re looking for.

Here is an example:

.left {
    float:left;
    width:200px;
    background: orange url("http://i42.tinypic.com/2vxfyc4.jpg") no-repeat 180px 50%;
}
.right {
    float:left; 
    width:200px;
    background: #ccc url("http://i42.tinypic.com/2vxfyc4.jpg") no-repeat -20px 50%;
}

In the example, I’ve also placed the image itself (absolutely positioned) directly below the background image and the widths are the same (in case you needed proof).