Question

I’m trying to build a tab menu system using a background image for the tab button.

The tab button image is 200px high and 40px wide. Since I want these tabs to be variable in height I wondered if the image being used could have 3 different positions inside the tab button to give it the rounded appearance of the top and bottom with the centre being of flexible height.

Here is my attempt. Its not producing the results I wanted. How should this work:

background-image:url(tabs-large.png); 
background-position:0 0, 0 20px, 0 180px; 
background-size:100% 20px, 100% 100%, 100% 20px;

Answer 1

Currently, you only have one background-image. This creates only one layer, so only your 0 0 position and 100% 20px size are being used and the rest are being ignored.

If tabs-large.png represents your entire tab image, you’ll need to slice it into three parts: the top edge, the bottom edge and the middle part for example, then specify each part in its own image. You also need to ensure that the top and bottom edges don’t repeat while the middle part does.

Here’s what the code would look like:

background-image: url(tabs-large-top.png), url(tabs-large-middle.png), url(tabs-large-bottom.png);
background-position: 0 0, 0 20px, 0 180px;
background-repeat: no-repeat, repeat-y, no-repeat;
background-size: 100% 20px, 100% 100%, 100% 20px;

This way, each image corresponds to one position and one size, in the same order.