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.

Answer 2

they are using a technique known as "Sliding doors". You can read more about it at A List Apart:

Sliding Doors Part 1

Sliding Doors Part 2

Answer 3

There are several tutorials on rounded corners on the net.

Using CSS2 you can try the following: CSS2 Tutorial

If you want to use CSS3: CSS3 Tutorial

A simple google search for rounded corners will give you many helpful tutorials.

Answer 4

It may be only peripherally relevant, but we should be careful not to leave it to the browser to resize large images to a more practical size.

Why fill a page with large images if they're only going to be scaled down by the browser?