Product images, png, not transparent on some pages, Nova theme, bigcartel

Question

i need help. 1) Products images, png, are not transparent on a products page but they are on a single product page. And they are ok on a stacked products layout but not on a grid. And we need grid layout. You can choose grid or stacked layout in the theme settings. (Nova theme) 2) Also on flexslider. This is also important to us because we want to play with various frames and we need that transparency.. I spent days researching this and found no solution, my head is full and confused. Can you help?

Answer 1

Here is your HTML:

<section class="product_images">
    <img src="http://images.cdn.bigcartel.com/bigcartel/product_images/141424843/max_h-300+max_w-300/traka2.png" class="fade_in" alt="Image of yellow melon. mellow">
</section>

The <section> tag has a background color applied to it via the class product_image . Here is the CSS for that class:

#products_page .canvas.grid #products .product a .product_images {
    width: 100%;
    min-height: 100%;
    margin: 0;
    background: transparent;
    background: #efefef;
}

This CSS selector appears on line 1471 of theme.css . Remove the second background declaration, background: #efefef; and the color that you see will go away. In CSS if a rule is repeated later with the same specificity it will be overridden. Here is a link to learn more about CSS, the cascade, specificity etc.

Think of your <img> element as sitting on top of your <section> element. Part of your image has transparency, like a window, so anything sitting "below" it will show through. Your <section> element had a light gray background color which was showing through the transparency of your PNG.

Answer 2

The best way to do this with Big Cartel's system is to head to Customize Design > Advanced > CSS, and paste this in at the very bottom:

#products_page .canvas.grid #products .product a .product_images { 
    background:none; 
}

That way you don't need to go digging for the line of code in your editor to modify, and if you change your mind down the road you can just delete these 3 lines quickly and easily.