Background Image

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1

    Background Image

    Dear all,
    I'm new in ext.net and I have a simple question: is it possible to set a background image for a view like this (this is the default Login page):

    <%@ 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>My Title</title>    
        <style type="text/css">
            h1 {
                font: normal 60px tahoma, arial, verdana;
                color: #E1E1E1;
            }
            
            h2 {
                font: normal 20px tahoma, arial, verdana;
                color: #E1E1E1;
            }
            
            h2 a {
                text-decoration: none;
                color: #E1E1E1;
            }
            
            .x-window-mc {
                background-color : #F4F4F4 !important;
            }
        </style>
        <script type="text/javascript">
            if (window.top.frames.length !== 0) {
                window.top.location = self.document.location;
            }
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        
        <h1>My App</h1>
        <h2>Powered by <a href="">xxx.net</a></h2>
        <ext:Window 
            ID="LoginWindow"
            runat="server" 
            Closable="false"
            Resizable="false"
            Height="130" 
            Icon="Lock" 
            Title="Login"
            Draggable="true"
            Width="300"
            Modal="true"
            Layout="fit"
            BodyBorder="false"
            Padding="5">        
            <Items>
                    <ext:FormPanel 
                        runat="server" 
                        FormID="form1"
                        Border="false"
                        Layout="form"
                        BodyBorder="false" 
                        BodyStyle="background:transparent;" 
                        Url='<%# Html.AttributeEncode(Url.Action("Login")) %>'>
                        <Items>
                            <ext:TextField 
                                ID="txtUsername" 
                                runat="server" 
                                FieldLabel="Username" 
                                AllowBlank="false"
                                BlankText="Username is required."
                                Text="demo"
                                AnchorHorizontal="100%"
                                />
                             <ext:TextField 
                                ID="txtPassword" 
                                runat="server" 
                                InputType="Password" 
                                FieldLabel="Password" 
                                AllowBlank="false" 
                                BlankText="Password is required."
                                Text="demo"
                                AnchorHorizontal="100%"
                                />
                        </Items>
                    </ext:FormPanel>
            </Items>
            <Buttons>
                <ext:Button runat="server" Text="Login" Icon="Accept">
                    <DirectEvents>
                        <Click 
                            Url="~/Account/Login/" 
                            Timeout="60000"
                            FormID="form1"
                            CleanRequest="true" 
                            Method="POST"
                            Before="Ext.Msg.wait('Verifica...', 'Autenticazione');"
                            Failure="Ext.Msg.show({
                               title:   'Login Error',
                               msg:     result.errorMessage,
                               buttons: Ext.Msg.OK,
                               icon:    Ext.MessageBox.ERROR
                            });">
                            <EventMask MinDelay="250" />
                            <ExtraParams> 
                                <ext:Parameter Name="ReturnUrl" Value="Ext.urlDecode(String(document.location).split('?')[1]).r || '/'" Mode="Raw" />
                            </ExtraParams>
                        </Click>
                    </DirectEvents>
                </ext:Button>
            </Buttons>
        </ext:Window>
    </body>
    </html>
    I tried to set it directly in the body tag or using a css but I wasn't unable to achieve the target.
    Thanks in advance,
    Alessandro
    Last edited by Daniil; Jun 18, 2012 at 10:57 PM. Reason: Please use [CODE] tags
  2. #2
    Hi,

    Do you need to set up a background for the Window or for the whole page?
  3. #3
    Hi Danill,
    I need to set up a background image for the whole page.

    Thanks,
    Alessandro

    Quote Originally Posted by Daniil View Post
    Hi,

    Do you need to set up a background for the Window or for the whole page?
  4. #4
    Please look at the example.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
        <style type="text/css">
            body {
                background-image: url("resources/images/test.png");
            }
            
            .transparent-window,
            .transparent-window .x-window-body, 
            .transparent-window .x-panel-body {
                background-color: transparent;
            }
            
            .transparent-panel {
                background-color: transparent;
            }
        </style>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:Window 
            runat="server" 
            Width="400" 
            Height="400" 
            Layout="FitLayout"
            Cls="transparent-window"
            Border="false">
            <Items>
                <ext:FormPanel runat="server" BodyCls="transparent-panel" Border="false">
                    <Items>
                        <ext:TextField runat="server" FieldLabel="TextField" />
                    </Items>
                </ext:FormPanel>
            </Items>
        </ext:Window>
    </body>
    </html>
  5. #5
    It works like a charm!

    Thanks a lot.
    Alessandro

    Quote Originally Posted by Daniil View Post
    Please look at the example.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
        <style type="text/css">
            body {
                background-image: url("resources/images/test.png");
            }
            
            .transparent-window,
            .transparent-window .x-window-body, 
            .transparent-window .x-panel-body {
                background-color: transparent;
            }
            
            .transparent-panel {
                background-color: transparent;
            }
        </style>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:Window 
            runat="server" 
            Width="400" 
            Height="400" 
            Layout="FitLayout"
            Cls="transparent-window"
            Border="false">
            <Items>
                <ext:FormPanel runat="server" BodyCls="transparent-panel" Border="false">
                    <Items>
                        <ext:TextField runat="server" FieldLabel="TextField" />
                    </Items>
                </ext:FormPanel>
            </Items>
        </ext:Window>
    </body>
    </html>

Similar Threads

  1. [CLOSED] Button control - image background
    By rnfigueira in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 16, 2011, 12:29 PM
  2. stretch background image
    By maryam in forum 1.x Help
    Replies: 0
    Last Post: Nov 07, 2010, 4:31 AM
  3. Set Viewport Background color or image
    By geodan in forum 1.x Help
    Replies: 4
    Last Post: May 28, 2010, 9:59 AM
  4. [CLOSED] GridPanel background image
    By methode in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 02, 2009, 5:13 AM
  5. Change Tab background color or background image
    By georgelanes in forum 1.x Help
    Replies: 0
    Last Post: Nov 06, 2008, 3:55 PM

Tags for this Thread

Posting Permissions