Hi,

I am trying to apply an image and repeat that as background for the apply button, I am using the same CSS which I used for regular buttons.

.button 
{
background:url("design/nav.gif") 0 0 repeat-x;
color: #fff;
border: solid 1px #DFDFDF;
font-weight: bold;
padding:5px 10px;
width:auto;
cursor:pointer;
}

But I am not getting my image repeated, any suggestions would be very helpful.

Thanks,
Vasu

Hi,

I tried to achieve your scenario and here is the sample code.

CSS:

Hope this will help you.
Thanks,
Shinu.

Hi Shinu,

Thank you very much for the response. Your reply helped me identify the problem which is I haven't provided the image URL correctly which now I corrected but I still have problem with as the background image doesn't apply completely to the width of the button, means I can still see some part of the button with Vista skin. Did you by any chance come across this situation or when you tried, the Apply button looks good for you. Find below the CSS code I have been using:

    .rfApply input /* or .rfButton is the class to be used for applying style to Apply button of RadFilter*/
    {
        background: url("../style/design/nav.gif") 0 0 repeat-x !important;
        color: #fff !important;
        border: solid 1px #DFDFDF !important;
        font-weight: bold !important;
        padding: 5px 10px !important;
        width: auto !important;
        height:26px !important;
    }

P.S: See attached screenshot where my CSS setting is not completely applied to Filter button.

Thanks,
Vasu

Hi,

Try the following CSS.

Thanks,
Shinu.

Hi Shinu,

First of all thank you for the response.

I couldn't get the functionality of applying background: url (which was my actual problem) if I make background-image as none. But I have noticed (also attached) the button with no background-image still shows some part of gray color in button. Do you think it's a bug to be notified to Telerik team?

Also attached nav.gif file if you would like to play around and see for yourself how it appears on the Apply button.

Thanks,
Vasu

Hi Vasu,

Please try the following approach.

ASPX:


CSS:


NOTE: Try to avoid using !important when possible. Better approach is to increase the selector specificity by adding elements, pseudo elements, classes etc.

I hope this helps.

Regards,
Venelin
Telerik