Clever Geek Handbook

How do I make a background image to resize to the containing element?

Check out the rounded corners of the main tabs on this site These background images are 440px wide and yet it adjusts to the contained element without losing the rounded edges.

+2


source to share


4 answers


It looks like the list item and anchor have the same background image, only at different offsets.

The image is set as the background for each of these elements. The anchor is set to display the left side of the image, while the list item is set to the rightmost right side, with the right padding wide enough for the image to peek in. This method is known as sliding doors. Here are the links compiled from other answers :



Thank Mariuz and of Darko the Z .

+7


source


they use a technique known as "Sliding Doors". You can read more about this at List Apart:

Sliding doors Part 1



Sliding Doors Part 2

+2


source


There are several tutorials on rounded corners on the net.

With CSS2, you can try this: CSS2 Tutorial

If you want to use CSS3: CSS3 Tutorial

A simple Google search for rounded corners will give you many helpful guides.

+1


source


This may only be peripheral, but we have to be careful not to leave it in the browser to resize large images to a more practical size.

Why fill the page with large images if they will only be scaled down by the browser?

0


source






More articles:


All Articles