How do you make a background image to adjust it's size to the containing element?

Question

Check the rounded corners of the main tabs in this site Those are background images with width of 440px, and still it adjusts to the containing element without loosing the rounded edges.

Answer 1

Looks like the list item and anchor both have the same background image, just at different offsets.

The image is set as the background for each of those elements. The anchor is set to show the left most portion of the image while the list item is set the right most portion with right padding just wide enough for the image to peek through. The technique is known as Sliding Doors. Here are the links collected from the other answers:

• A List Apart's Sliding Doors Part 1
• A List Apart's Sliding Doors Part 2
• A CSS2 tutorial
• A CSS3 tutorial

Thanks Mariuz and Darko Z.