turn "add to cart" text into image

-- url of the page with the problem -- : www.babyartikelen-buysse.be/newsite2015/...t/27-ophelie-zuignap
-- HikaShop version -- : 2.6.0
-- Joomla version -- : 3.4.5

Hello,

I have used the search and found a couple of solutions but none of them work for me!

possible solution that failed 1

possible solution that failed 2

Whats the problem?
I try to get a image of a cart where it says " add to cart".
i have changed the CSS.

this is the part i have changed to try and display a cart icon:
i added the stuff in bold.

a.hikashop_cart_button, a.hikashop_compare_button, .hikashop_cart_input_button{
	[b]background-image:url(media/com_hikashop/upload/addtocart2.jpg);[/b]
  	width:50px;
 	height:50px;
	text-decoration:none;
	color: #777777 !important;
	cursor: pointer;
	display: inline-block;
	line-height: 18px;
	margin: 5px;
	padding: 3px 8px;
	text-align: center;
	box-shadow:none !important;
	text-shadow:none !important;
/*	
	border:1px solid;
	border-color: #EEEEEE #DDDDDD #DDDDDD #EEEEEE;
	border-radius:3px;
	background-color: #eee;
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eee));
	background: -webkit-linear-gradient(top, #ffffff, #eee);
	background: -moz-linear-gradient(top, #ffffff, #eee);
	background: -o-linear-gradient(top, #ffffff, #eee);
	background: linear-gradient(top, #ffffff, #eee);
*/

Hi,

Have you tried to inspect code with firebug?
Cause looking with it, this is the code it shows on line 292 frontend_custom_css:

a.hikashop_cart_button, a.hikashop_compare_button, .hikashop_cart_input_button {
width: 50px;
height: 50px;
text-decoration: none;
color: #777 !important;
cursor: pointer;
display: inline-block;
line-height: 18px;
margin: 5px;
padding: 3px 8px;
text-align: center;
box-shadow: none !important;
text-shadow: none !important;
border-width: 1px;
border-style: solid;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
border-color: #EEE #DDD #DDD #EEE;
border-radius: 3px;
background: transparent -moz-linear-gradient(center top , #FFF, #EEE) repeat scroll 0% 0%;
}

There is nothing about background image.

Adding this should work:

background-image: url("/images/YOUR_IMAGE_NAME.jpg");


In this case you need to add your image in public_html/images folder

Thanks

@Bram:

You'll need to use a correct relative path and an "!important". So, instead of your code line make it

background-image: url("../upload/addtocart2.jpg") !important;

@Bram:

Since you're using <a>nchors for buttons instead of <input>, I shall not forget to mention an even simpler way:

Use a language override like

ADD_TO_CART="<img src='../../../media/com_hikashop/upload/addtocart2.jpg' alt='Aan winkelwagen toevoegen'>"

Hello again,

Thank you for the fast help! The problem was with the code and the relative path.
It has almost been solved!

Thanks guys!!!

Greetings

Bram