I created a png file of a rounded rectangle in Photoshop, but noticed that parts of the image are getting cropped at the top right, bottom right, and bottom left corners, resulting in a square shape overall. Only the top left corner retains its rounded edge.
To address this issue, I saved the image with extra padding on all four sides, making it 870 x 335 pixels in size. Here is the CSS code I used:
#main {
margin: 8% auto 0 auto;
width: 870px;
height: 335px;
background: url(images/form.png) 125px 87px no-repeat;
position: relative;
}
I assumed that providing additional space around the rectangle in Photoshop would display the entire shape without any cropping. Am I overlooking a crucial step or detail? Any help or insights would be greatly appreciated. Thank you!