We help IT Professionals succeed at work.

Attach 2 background image using CSS or jQuery

sabecs
sabecs asked
on
Hi,
I am trying to allow my buttons/link to cater for different text length.
I have created button images wider than they need to be and currently the images gets cut off on the right hand side.
Is there a way of attaching the right hand side button images to this so that the button does not appear cut off?

I hope this makes sense.

Thanks in advance for your feedback.

<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

View Solution Only

COBOLdinosaur
Top Expert 2013

Commented:
What is it that you are asking?  I don't see a question here.
sabecs

Author

Commented:
Sorry, I might have been in edit mode.

Hi,
I am trying to allow my buttons/link to cater for different text length.
I have created button images wider than they need to be and currently the images gets cut off on the right hand side.
Is there a way of attaching the right hand side button images to this so that the button does not appear cut off?

I hope this makes sense.

Thanks in advance for your feedback.



Fixer of Problems
CERTIFIED EXPERT
Most Valuable Expert 2014
Commented:
Yes.  Using either a table or a div, you give the right end of the image it's own fixed size cell.  Then put the regular image as a background in the cell to the left.  Then when the right end gets cut off in that cell, the next cell has the right end of the image to make it look complete.

You will have to use javascript to change both images on 'hover', CSS can only change one image on a 'hover'.
sabecs

Author

Commented:
Thanks,
I think almost have it, just need to work out how to change the       
background-image: url(/images/test_button_rhs.png);
to
background-image: url(/images/test_button_rhs_ovr.png);
in .button_rhs when class='main_menu' next to it is hovered.

I am pretty sure this can be done with jQuery but I don't know how to do it.
Any help would be apprecited.

<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: 0px;
	background-image: url(/images/test_button.png);
	background-repeat: repeat-x;
	margin-right: 20px;

}

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

.button_rhs{
	display: block;
    position:relative;
    top:-40px;
    float:right;
	height: 40px;
	width:20px;
	background-image: url(/images/test_button_rhs.png);
    margin-bottom:-40px;
}

</style>

</head>
<body>       


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

Open in new window

COBOLdinosaur
Top Expert 2013

Commented:
lol.  All that was showing was the title and the images.  Glad you are getting some help.
Dave BaldwinFixer of Problems
CERTIFIED EXPERT
Most Valuable Expert 2014

Commented:
I'm not good with jquery.  Look for "jquery rollover" but keep in mind that you have to change two images, not just one.
sabecs

Author

Commented:
Thanks for your help.
Dave BaldwinFixer of Problems
CERTIFIED EXPERT
Most Valuable Expert 2014

Commented:
You're welcome.

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