Home/ Questions/Q 7515307
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T00:46:01+00:00

I am trying to achieve a button, which would look same (its background) no

  • 0

I am trying to achieve a button, which would look same (its background) no matter how wide it will be (the longer text inside, the wider button).

For button image i would use 1 pixel wide image:

enter image description here – it have 5 pixels black on top, and then 35 pixels red. And i use that css to repeat the background:

background-image:url('../images/button.png');
background-repeat: repeat-x;

Now, it will look like this: xxxxxxxxxxxxxxxxxxxxxxxx

But i want to use these two images as a left and right side of the button:
enter image description here enter image description here
So it would like the button is curved on the top corners, and it will look like a real button. Is it even possible?

So, the question is, how can i use 3 images as a background of a div, or any other thing, to make it look like one, whole button, with middle part repeating as many times, as it needs, to fill it.
Desired look: enter image description here

PS. I painted that in MSPaint a sec ago, so don’t mind the quality of curving, or colors, i just wanted it to be visible.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Did you try googling this before you posted? There are many sites and examples out there on how to do this. Try searching for “css tabs with rounded corners” and see what you get…

    Here are 2 links to start with, but in future try a simple Google search before posting a question.

    Example Code from http://www.sitepoint.com/accessible-menu-tabs/

    <ul id="navigation">
<li><a href="index.html"><span>Home</span></a></li>
<li><a href="page1.html"><span>Page 1</span></a></li>
</ul>

#navigation a { color: #000; background: #fb0 url("left-tab.gif") left top no-repeat; text-decoration: none; padding-left: 10px }
#navigation a span { background: url("right-tab.gif") right top no-repeat; padding-right: 10px }
#navigation a, #navigation a span { display: block; float: left } 
#navigation a:hover { color: #fff; background: #26a url("left-tab-hover.gif") left top no-repeat; text-decoration: none; padding-left: 10px }
#navigation a:hover span { background: url("right-tab-hover.gif") right top no-repeat; padding-right: 10px }
#navigation { list-style: none; padding: 0; margin: 0 }
#navigation li { float: left; display: block; margin: 0; padding: 0 }

    Or a Repository of more Tutorials etc: http://www.bitrepository.com/rounded-corners-tab-menus.html

    You will definitely find something to work for you there….

    • 0