I have an image that has rounded corners that I want to use as a background image in a div. As we all know photoshop only allows for you to save an image as a square. When trying to save this image it gives me the option to choose a matte color for the background in order to take care of the transparency(in my case drop-shadow)... This is fine and dandy as long as you have a solid background but what if your background image has a textured image as its background? In my process I saved the image larger than what it actually was to include the textured background image. I figured I could align it perfectly by positioning it in CSS but that was not case. The part that stood out like a sore thumb was the square corners. I was wondering if anybody knew how to "shave" the corners off using CSS. I tried applying the border-radius command to the div that include my image and it didn't work. Any ideas how to fix this?
Hi Dan,
This a common problem that I tend to run into quite often. There are a couple of possible fixes neither of which would require css but rather creative slicing & dicing of images within PhotoShop.
You could try to shave some of the corner pixels off of the image with the lasso tool. Simply slice out your image as you would normally do and save it as a .gif. Then re-open your image in PhotoShop, change the image mode from "indexed" to "RGB," make a copy of the background layer and turn the visibility of the background layer off. Next select the lasso tool, make sure that the "feather" is set to 0px and that you have your "Anti-alias" turned off.
Then, begin making a selection of the extra pixels outside of your image that really could be eliminated. Even though you have a dropshadow on your image its likely to only overlay a couple of extra pixels. I'm simply suggesting that you eliminate the uneccessary corner pixels that would give you problems when placed on a layer above your textured background. After you have eliminated these extra pixels you would have to save as a .gif since .gif format supports trancparency.
After placing this image into your HTML and CSS it should appear as intended as a box with rounded corners on a layer above your background.
You can also save your image as a .png since the png format supports alpha transparency or "varying" levels of transparency. In this case you would simply need to slice the image exactly as you would if you were only concerned about the box and its drop shadow. Then you would need to turn off all layers underneath your box including the background layer and then save your image for the Web. When the dialogue box pops up simply select the png 24 option from the dropdown and your on your way.
The only major drawback to using the .png image format is that not all browsers support alpha transparency. Most major browsers do have alpha transparency support but Internet Explorer 6 does not. There are a few fixes out there for ie6 but they are both "hacky" and "bulky" tending to slow your page load times down so I don't recommend them. A sort of rule of thumb may be to simply have a slightly different look on the image in ie6 and if ie6 users are not part of your audience then I wouldn't even worry about them.
Hope this answers your question.
Couto Solutions Design Team4115 Broad Street, Suite B-5, San Luis Obispo, CA 93401Phone: (805) 540-3335 | Web: www.CoutoSolutions.com