CSS and getting around partially cropped corners

I have a png of a simple rounded rectangle I made in Photoshop. I want the entire rectangle to show, however there is a little cropping on the top right, bottom right and bottom left corners of the image that make it square. The top left corner is the only one of the 4 that maintains that rounded edge.

I saved the image in photoshop and gave a little bit of extra room on all 4 sides - saving it as 870 * 335 pixels. My CSS looks like this:

 #main {
     margin: 8% auto 0 auto;
     widt开发者_如何转开发h: 870px;
     height: 335px;
     background: url(images/form.png) 125px 87px no-repeat;
     position: relative;
}

The extra space I gave it in photoshop should show the whole rectangle correct? Or am I missing something critical? Thanks!

This part doesn't make sense to me:

background: ... 125px 87px ...;

You are forcing the image to a background position that will not allow the entire thing to show, if it is the same width as its container.

Try this:

background: url(images/form.png) 0 0 no-repeat;

There is nothing wrong with using background positioning on your bg image if you're correctly using sprites. However, are you trying to move the actual container (#main) left 125px and down 87px? Using background positioning that way would not achieve what you're trying to do.

If that's the case, try using padding instead. If not, let us know. Can you provide a link to your work? Firebug is a must-have if you don't have it.