Using an image button with borders, how to stretch / repeat the middle part in CSS for variable-length content?

Question

This is similar to the Google Chrome tab style taken from the Soda theme (Sublime Text 2):

You see how it has 3 parts: rising front, 2-3px flat middle, falling edge.

Q: How could I “repeat” the middle part in CSS and stretch the tab to fit the line size?

Image dimensions: 42 x 28.

If this helps, this is a fragment of the .sublime-theme file:

// Tab element { "class": "tab_control", "content_margin": [12, 3, 12, 3], "max_margin_trim": 0, "hit_test_level": 0.0, "layer0.texture": "Theme - Soda/Soda Dark/tab-inactive.png", "layer0.inner_margin": [5, 5], "layer0.opacity": 1.0 }, 

Answer 1

There are several different ways to achieve this effect, and it really depends on your preference. As you correctly postulated, you need to think of it as three different parts. Thus, the easiest way would be to split it into 3 different images.

The solution also depends on how your HTML markup looks. For example, if you only have:

 <a class="tab" href="#">My Tab</a> 

Then you have only one element that you can create to do this (which makes it much harder).

However, if you have a wrapping element around the tab:

 <li class="tab"><a href="#">My Tab</a></li> 

Then you can use the LI element to achieve the desired result.

Single element

In my first example, you had only one anchor element. After examining the image that you want to use for the tab, I see that it has some bevel and is not a simple flat color or a flat color with a simple border. This means that we will not be able to achieve this effect using direct CSS, so we need CSS to split the image.

You have two options.

Option 1

Divide the image into two images on the left and right, dividing it in the center down. Then, in the image editing application, stretch your canvas to the right, say 200 pixels (or what do you think the maximum tab width will ever be). Finally, select the farthest right edge (this should be in the middle of the tab) and stretch it horizontally to the right border.

What you need in the end is the slanted left side, and then the average area is “200 pixels”.

Now you have two images, which we will call tab-left-side.png and tab-right-side.png . With these two images, you can achieve the influence of a tab with the following CSS:

 .tab { background: url(tab-left-side.png) no-repeat 0 0; overflow: hidden; padding-left: 10px; /* width of the left edge of the tab, before the middle section begins. If you want more horizontal tabbing, add it to this value */ } .tab:after { content: ' '; overflow: hidden; width: 10px; /* width of the right edge of the tab */ background: url(tab-right-side.png) no-repeat 0 0; } 

Option 2

This option requires splitting the image into three images. You will have tab-left-side.png , tab-middle.png and tab-right-side.png . As you can guess, you should split the image into them accordingly.

Now you can use CSS:

 .tab { background: url(../images/tab-middle.png) repeat-x 0 0; overflow: hidden; color: white; float: left; margin: 0 10px; /* must be same as side widths */ } .tab:after { content: '.'; overflow: hidden; text-indent: -999px; float: right; width: 17px; /* width of the right edge of the tab */ background: url(../images/tab-right-side.png) no-repeat 0 0; } .tab:before { content: '.'; text-indent: -999px; overflow: hidden; float: left; background: url(../images/tab-left-side.png) no-repeat 0 0; width: 17px; /* width of the left edge of the tab */ } 

Double element

A double element is performed exactly the same as Option 1 of the Single Element example, except that you do not need to use pseudo-class selectors. If you are writing code that should support older browsers that do not support pseudo-class selectors (or at least :before and :after ), then this is your only option.

Again, you split the two images up into tab-left-side.png and tab-right-side.png .

Then your CSS:

 LI.tab { background: url(tab-left-side.png) no-repeat 0 0; overflow: hidden; padding-left: 10px; /* width of the left edge of the tab, before the middle section begins. If you want more horizontal tabbing, add it to this value */ } LI.tab A { content: ' '; overflow: hidden; width: 10px; /* width of the right edge of the tab */ background: url(tab-right-side.png) no-repeat 0 0; } 

This is almost the same CSS as in the Option 1 example, except that we changed the selector.

Answer 2

Another way to achieve a similar result is to use multiple backgrounds and background size:

 li.tab a { /* using inline-block for simplicity you could easily switch to display block and floats. */ display: inline-block; overflow: hidden; color: #fff; padding: 0px 20px; /* I'm using 75% sizing on my middle image which means my min and max calculations work out as follows. This can change depening on the images you use. */ min-width: 80px; max-width: 160px; /* height is obviously dependent on many things, I'm using line-height to center my text but there are other ways. */ height: 26px; line-height: 30px; text-align: center; /* depending on how your images are designed you may wish to have the left and right images layered on top of the middle. To do this just reverse the order of the background images. */ background: url(middle.png) center bottom / 75% 26px no-repeat, url(left.png) left bottom no-repeat, url(right.png) right bottom no-repeat ; } 

This has some prerequisites:

• It depends on the relatively new features of css and, as such, does not work in older browsers.
• You must define the minimum and maximum width that your tabs can be.
• You need to use two or three images, this will not work with the sprite.
• You need an average image that should be rectangular.