I came across this site and wanted to copy the way they have removed the background color from the product images. How do they do it? It seems they are doing it on the frontend, since all images are with white background color...

I came across this site http://skincity.se/sv/product/1198/md-formulations-vit-a-plus-hand-body-creme and wanted to copy the way they have removed the background color from the product images. How do they do it? It seems they are doing it on the frontend, since all images are with white background color...

• javascript
• jquery
• css
• image

• You mean the black header and footer that "float" above the images? If so it is probably done with just setting high zindex and absolute position in the CSS. – Gregory Mostizky Commented Oct 2, 2011 at 15:50

2 Answers 2

They are placing a semi-transparent overlay overtop the image. See their CSS:

#primary-image-node-overlay {
    background-color: black;
    opacity: 0.08;
    filter: alpha(opacity = 8) !important;
}

I thought you were right about JavaScript, until I tried disabling it and refreshing the page - if you try that, you'll find that the effect remains.

It's actually some CSS trickery. The grayish background is actually above the image - it has a black background with an opacity of 0.08. It appears to be a gray background, when in fact it is a semi-transparent foreground.

Hope that helps!