The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

[Solved] Image Missmatch on Semi-Transparent PNG Gradient

  • # February 3, 2010 at 10:56 am


    I’m experiencing some strangeness on semi-transparent gradient background PNGs.

    If you look at the attached image, you can see that bottom left corner of this treecard seems to have a darker shadow than any of the other borders on the card. There are 3 background images on a treecard (header, middle and footer). All 3 of these images have been saved in photoshop in exactly the same way using the "export for web" feature. I have not changed any of the settings on each of the saved images. – Pick tree number 5

    One other really strange thing is that changing the background-color to #fff will cause the shadow to lighten and match up with the other shadows. But changing the background-color to transparent or nothing will cause the background-image shadow to darken again. Strange, no?

    Settings –
    Convert to sRGB (not selected)
    Preset: PNG24
    Image Size: Bicubic smoother, Constrain Proportions
    Proof Setup under View menu: Windows RGB

    Any help appreciated

    # February 3, 2010 at 2:27 pm

    This reply has been reported for inappropriate content.

    It is indeed very strange if you saved all three exactly the same. If all your images are doing the same thing in the footer section then it would seem like a repetition. Look in the code to see if you are not repeating the image twice on top of itself.

    # February 3, 2010 at 5:15 pm

    This reply has been reported for inappropriate content.

    Just looked again and you are repeating the footer div in div class="tree-card avail"> and in <div class="image-sack">. If you remove one of the footers the dark shadow disappears.

    # February 4, 2010 at 8:15 am

    Ok, that solved it. I should be more careful with my markup ;)

    Many thanks for the help.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed