Question

I’m having some issues while using a transparent PNG image as a background image via CSS.

This is what I get: https://i.stack.imgur.com/BKj7E.png

And this is my CSS code:

#userBar {
    background-color: transparent;
    background-image: url('../img/userbarbg.png');
    background-position: bottom;
    background-repeat: repeat-x;
    float: left;
    height: 36px;
    margin-top: 10px;
    width: 100%;
    box-shadow: 0 0 5px #888;
}

Am I doing something wrong?

Answer 1

You’re seeing the box-shadow behind the background image. The element is still a rectangular box as far as the browser is concerned, so that box shape is what it uses to generate the shadow. You’ll need to specify a border-radius (including the various browser prefixes, -webkit-, -moz-, -o-, etc.) that matches that of the corners on your transparent background so the shadow will have the same shape as the content it’s behind.