I'm trying to understand how a background image is used in a css button. It seems the image is much larger than the button, still the corners are matched to the button(resulting a rounded corner button). It seems it is related to .btn *. I couldn't find any reference about how * can be used. Can you explain how the image is rendered in the button, using the * tag?

I assume * will match any element. However I don't get it how in this case the image is rendered like this.

.btn { display: block; position: relative; background: #aaa; padding: 5px; float: left; color: #fff; text-decoration: none; cursor: pointer; } .btn * { font-style: normal; background-image: url(btn2.png); background-repeat: no-repeat; display: block; position: relative; }

full example here: http://monc.se/kitchen/59/scalable-css-buttons-using-png-and-background-colors/