We help IT Professionals succeed at work.

jQuery or CSS - strech image background for button/menu links

sabecs
sabecs asked
on
Hi,
is it possible to modify the css code below so that I am able to use the attached images to stretch or shrink when the menu text changes in length?

Can this perhaps be achieved with CSS or jQuery?

Thanks.

 
<html>
<head>
<title>Test</title>
<style type="text/css"> 
 
a.main_menu, a.main_menu:visited, div.main_menu{
	display: block;
	height: 40px;
	line-height: 35px;
	color: #666;
	width: auto;
	text-align: left;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-weight: normal;
	text-decoration: none;
	padding-left: 15px;
	padding-right: 15px;
	background-image: url(/images/test_button.png);
	background-repeat: repeat-x;
	margin-right: 1px;
	border: 1px solid #FFFFFF;
}

a.main_menu:hover{
	background-image: url(/images/test_button_ovr.png);
	background-repeat: repeat-x;
	color: #000;
}

 
 
</style>

</head>
<body>       


<table>
<tr>
        <td>
        <div  id='menu_parent1'><a class='main_menu' href='#'>Home Page</a></div> 
        </td>
        <td>
        <div id='menu_parent2'><a class='main_menu' href='#'>Our Strategic Partners</a></div> 
        </td>
        <td><div id='menu_parent3'><a class='main_menu' href='#'>Forms & Documents</a></div> 
        </td>
        <td>
        <div id='menu_parent4'><a class='main_menu' href=''>Contact Us</a></div> 
</td>
</tr>
</table>
</body>
</html>

Open in new window


test_button test_button_ovr test_button_ovr_rhs test_button_rhs
Comment
Watch Question

Commented:
Hi,

Have you tried the background-size property?

http://www.w3schools.com/cssref/css3_pr_background-size.asp

It's only supported by the newer browsers though.


/peter

Author

Commented:
Thanks Peter, I will look into it.
Anyone know a way of getting it to work with most browsers?

Commented:
Found this link that might help you with older browsers.

http://webdesign.about.com/od/css3/f/blfaqbgsize.htm

Look at Faking a Stretched Background Image Over a Smaller Space

Author

Commented:
Thanks Peter, perhaps I should not have used the word stretch.
Currently now the button images are wider than need to be and the right hand side of the button gets cut off. (no curves). I want to float or attach the rhs button images to the end so that it appears as a normal button. I hope this makes sense.
Look up Sliding Doors.

http://www.cssplay.co.uk/menus/sliding_doors.html
http://www.alistapart.com/articles/slidingdoors2/

This is the same idea, the tab width will expand based on the content inside of it.  Uses two images, a left and a right.  Your images are not correct.  Your right image should be really really wide and should have the left side cut off square (like the end of the button was cut off).  The left side should be a little sliver, just the rounded part.

Those two pages will give you all the code you need.

Author

Commented:
Thanks for your help, I ended up using jquery.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.