Since you’ve been underwhelmed with comments, I’ll throw in a few suggestions.
Is there a way to crop images in Photoshop to exact pixels?
In PhotoShop, set your cropping size in the menu bar to whatever size you want your “chunks”. Then open up your “Info” palette and click the “Info” tab. Click the “Crop” tool and drag over the top of your image. In the Info tab, you will see the x and y coordinates of the starting point of the crop. So for example, if you are trying to create 100 X 100 cropped images, drag the crop top until x = 0, y = 0. Drag the crop tool to 100, 100. But notice that the dimensions are 101, 101. OK, so just drag to 99, 99.
For me the image still looks 1 px from the edge, so nudge as needed. Then your second and following crops can be calculated exactly, according to the x,y coordinates.
Is there a better way of creating a layout like this?
Probably a number of different answers here.
One simple way, create your whole background image in one piece in Illustrator or PhotoShop and hotmap links over the top of the background image. Perfect layout…. not the greatest way to do it.
Second, be very precise in your measurements from cropping to layout. Use CSS as you have but be sure your image size exactly matches the <div> width and height.
When you see a small bit of the image being repeated under the main part of the image, it’s because the image and <div> dimensions are not exactly equal. For example, the “couples” image…image is 258 X 162, fit in a <div> which is 250 X 165. Each image-<div> must match exactly or there will be a repeat of a portion of the image, as it’s now set.
With a little work, you could get the appearance very close to perfect. You might want to try using colors other than white as background color for the <div>s since your <body> is white. This will help you ID if the problem is inside the <div> or in the CSS. Also put in no-repeat for those images just in case the your image size and <div> size is off just a bit.
Best of luck to ya,
Eye for Video