CSS - Why isn't the image overlapping the background in this rounded corner design?

Question

Hello all,

I am looking at the navigation bar on Linkedin.

http://www.linkedin.com/

#nav-primary {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -320px transparent;
}
#nav-primary .wrapper {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -510px transparent;
        height:39px;
        padding:0 5px;
        }   

The background of #nav-primary controls the top part which I understand. However, the background of #nav-primary .wrapper controls the bottom part, I really lost here.

If you look the background image sprite_global_v3.png carefully, at line 510, there is no color there, just transparent color, how this can make the shading bottom border displayed.

Based on my understanding, in CSS the background image starts from top-left corner with 0 0 and x grows from left to right. while y decreases from top to bottom.

Any idea?

Thank you

Answer 1

Based on my understanding, in CSS the background image starts from top-left corner with 0 0 and x grows from left to right. while y decreases from top to bottom.

Correct, however, what you think is happening is actually happening.

The .gif and .png files both support something called transparency, which is basically what you would think: you 'see through' the image to see the color that would be behind it.

PNG goes even farther in that you can have things partially transparent, which creates a neat effect. GIFs can only be totally transparent or opaque.

Some browsers don't like to cooperate nicely with transparent pngs though, but we don't care about that.

:D