Question

I use a table to show several images. I need to show the left half an image in the first td-element and the right half of it in the second td-element. This is because some of the images have double width as others. I thought i use a div and set this image as background image for the first two td-elements using a child-div. Now i am fiddling around to make it work using css.

Any suggestions?

Update: Working example: http://jsfiddle.net/BkAcu/2/

Answer 1

Use background-position: <horizontal> <vertical> where <horizontal> and <vertical> are background offsets, in conjunction with background-repeat: no-repeat.

Set the background-position to a negative value, to move the bg to the left.

See also: https://developer.mozilla.org/en/CSS/background-position

Example (assume your TDs to have a width of 100px, and the image to be 200px);

#td1, #td2 {
    background: url("200.png") no-repeat;
}
#td2 {
    background-position: -100px;
}