CODEWITHSUNDEEP
backgroundpngtransparency
ANGRYKOREAMAN
ANGRYKOREAMAN

Reputation: 85

Why are these PNG files black (background) on mouse over and not transparent?

I'm building a Magento shop for a client, I uploaded some test images for the products but they seem to have a black background whenever I mouse over using chrome. Does anyone understand why? I don't see any problems with css so it has to be the images themselves.

URL: (I'm talking about those images below 'New products' and 'featured') http://bit.ly/zuRH2O

I made those using photoshop and the png-24 save-for-web option (http://bit.ly/zGXTAo). Been doing that for years and this is actually the first time happening.

Upvotes: 0

Views: 401

Answers (1)

James Black
James Black

Reputation: 41858

The problem is in your css. Look at the background image:

a.product-image {
margin-bottom: 10px;
width: 182px;
height: 239px;
border: 1px solid #2F3238;
background: url("/images/thumb_bg.png") 50% top no-repeat;
display: block;
border-image: initial;

If you right click on the images, and view in new tab you will see that they are transparent. Your background is dark, so the image picks that up.

Upvotes: 1

Related Questions