Get a free trial // Grow your CSS skills // Land your dream job

[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

    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

    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