What's New?

[CLOSED] Bakcground image for button

  1. #1
    May 07, 2012, 3:24 PM

    [CLOSED] Bakcground image for button

    Hello I need to add button with background layer and text from resx file on top. I tryed css for button and linkbutton, but it doesn't work propertly
    ext:LinkButton runat="server" ID="btnDeleteDelivery" Text="Delete" Cls="cartitems_button"></ext:LinkButton>


.cartitems_button
{
    background-image: url("/resources/images/red_btn.png") !important; 
}
    Last edited by Daniil; May 10, 2012 at 12:53 PM. Reason: [CLOSED]
  2. #2
    May 07, 2012, 3:52 PM
    Hi,

    It appears to be working for LinkButton.

    Example
    <%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>

    <style type="text/css">
        .my-button {
            background-image: url("resources/images/test.png");
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:LinkButton runat="server" Cls="my-button" Text="Link" />
    </form>
</body>
</html>
    Regarding to a common Button. Its markup is much more difficult and it requires more CSS rules to override its "background". You can investigate HTML markup of already rendered button inspecting HTML elements via browser developer tools.

    Though I would recommend to use ImageButton.
    https://examples1.ext.net/#/Buttons/Basic/ImageButton/
  3. #3
    May 07, 2012, 4:40 PM
    The way with LinkButton is showing really small backround image, but image is 132px X 67px. I have inspected element using Firebug and it set background, but why it is so small (looks like 10px X 2px)
  4. #4
    May 08, 2012, 6:58 AM
    Well, there is
    display: inline;
    of its container.

    I can suggest the following way.

    Example
    <%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>

    <style type="text/css">
        .my-button {
            display: block !important;
            background-image: url("resources/images/48x48.png");
            background-repeat: no-repeat;
            height: 48px;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:LinkButton runat="server" CtCls="my-button" Text="Link" />
    </form>
</body>
</html>
    Maybe you could just use HyperLink with an image.
    https://examples1.ext.net/#/Form/HyperLink/Basic/

Similar Threads

  1. [CLOSED] Image and text in button
    By speedstepmem2 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 17, 2009, 8:51 AM
  2. [CLOSED] Bug in ext:qtip in asp image button
    By speedstepmem2 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 20, 2009, 2:54 AM
  3. [CLOSED] Image next to radio button?
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 06, 2009, 11:31 AM
  4. Image Button
    By sz_146 in forum 1.x Help
    Replies: 0
    Last Post: Oct 23, 2008, 7:54 AM

Posting Permissions