All geek questions in one place

Login page images with CSS URL not showing

Well, I'm at a standstill about this and need quick help.

I have an ASP.NET application using forms authentication. On my Login.aspx page, I use several images in the background for visual impact. The URL is set using CSS styles that are defined in the file (not in the subject, etc.). All images are located in the Images folder under the root level of the website. The Images folder has a separate web.config file that allows all users to access.

The problem I am facing is the constant resolution of images in the development and production environments. What I learned (and do not control) is that the site is being deployed on a sub-site during production, while we use the Cassini web server in Visual Studio for development. As a result, starting each path with a backslash (/) does not work in production (although it works great in development). Removing a backslash violates the dev environment.

I currently have CSS similar to:

#banner
{
    background: transparent url('Images/plainBlueHeader2.png') no-repeat 20% 0;
    height: 70px;
    top: 21px;
    left: 3px;
}

This does not work in development, but it works in our QA and Production environments.

, , -, , , . , .

, , , , .

UPDATE: , IS . , BODY, , , , , CSS, .

UPDATE: -:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Login" %>
<!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>Login</title>
  <style type="text/css">
    body { background:#fff url('Images/bodyBackBlue.png') repeat-x;font-size:11px;font-family:Sans-Serif; }

    #wrapper { width:990px;margin-top:30px;margin-left:auto;margin-right:auto;position:relative; }

    #bannerwrapper { width:990px;margin-left:auto;margin-right:auto;position:relative; }

    #banner { background:transparent url('Images/plainBlueHeader2.png') no-repeat 20% 0;height:70px;top:21px;left:3px; }

    .logo { float:left;text-decoration:none;margin-left:30px;margin-top:29px; }

    .user-greeting { background-image:none;margin:8px 100px;color:#fff;float:right;font-weight:bold; }

    .warningWrapper { float:none;font-family:Sans-Serif;font-size:small;margin-left:20px; }

    #infowrapper { margin:3px 3px 3px 3px;width:68%;border-left:solid 1px #00629b; }

    #rightColumnWrapper { margin:3px 13px 3px 3px;width:28%;float:right; }

    #loginwrapper { height:220px;border-left:solid 1px #00629b;margin-bottom:20px; }

    #noticewrapper { height:100px;border-top:1px solid #00629b;margin-bottom:20px; } 

    .contentTopper { overflow:hidden;position:static;background:transparent URL('Images/portlet_topper_back.png') left repeat-x;height:23px;min-height:23px; }

    .contentTitle { float:left;color:#fff;font-weight:bold;font-size:15px;padding-top:2px;padding-left:4px; }

    .contentleft { padding:20px 5px 5px 8px;float:left;width:400px; }

    .contentRight { float:right;padding:30px 20px 10px 10px; }

    .content { padding-left:5px; }
  </style>
</head>

<body>
  <div id="bannerwrapper">
    <div id="banner">
      <span class="logo"><img id="LogoImage" src="Images/LogoLarge.jpg" height="40px" width="105px"/></span>
      <span class="user-greeting">Welcome!</span>
    </div>
  </div>        
  <div id="wrapper">
    <div id="rightColumnWrapper">
      <div id="loginwrapper">
        <div class="contentTopper"> 
          <span class="contentTitle"> Sign In </span>
        </div>
        <div class="content">        
          <form id="Login" runat="server">
            <asp:Panel ID="PanelLogin" runat="server">
              <table>
                <tr>
                  <td>
                    <asp:Label ID="LabelUserName" runat="server">User name:</asp:Label>
                  </td>
                </tr>
                <tr>
                  <td width="150">
                    <asp:TextBox ID="txtUsername" runat="server" Height="20px"></asp:TextBox>
                  </td>
                </tr>
                <tr>
                  <td>
                    <asp:Label ID="LabelPassword" runat="server">Password:</asp:Label>
                  </td>
                </tr>
                <tr>                                
                  <td width="150">
                    <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" Height="20px" Width="100%" ></asp:TextBox><br />
                  </td>
                </tr>
                <tr>                                
                  <td width="80" style="padding: 5px">
                    <asp:Button ID="btnLogin" runat="server" EnableTheming="true" Text="Sign In" OnClick="btnLogin_Click"></asp:Button><br />
                  </td>
                </tr>
              </table>
              <asp:Label ID="errorLabel" runat="server" ForeColor="#ff3300"></asp:Label><br />
            </asp:Panel>
          </form>
        </div>                
      </div>
      <div id="noticewrapper">
        <div class="contentTopper"> 
          <span class="contentTitle"> Special Notice </span>
        </div>
        <div class="content">
          <ul>
            <li>abc</li>
          </ul>               
        </div>
      </div>
    </div>
    <div id="infowrapper">
      <div class="contentTopper"> 
        <span class="contentTitle"> Welcome </span>
      </div>
      <div class="contentleft">
        <p><span style="font-size: small"><b>abc</b></span></p>
        <p>abc</p>
        <p><b>abc</b>abc</p>
        <p><b>abc</b>abc</p>
        <p>&nbsp;</p><p>&nbsp;</p>
      </div>
      <div class="contentRight">
        <img class="contentRight" id="LogoImage2" src="Images/LogoLarge.jpg" height="79px" width="199px"/> 
        <p style="text-align: center">abc</p>
      </div> 
    </div>
    <div class="warningWrapper">
      <asp:Label ID="Label1" runat="server" ForeColor="#FF0000" ></asp:Label>        
      <asp:Label ID="Label2" runat="server" ForeColor="#FF0000" Visible="false" Text="abc"></asp:Label>
      <asp:Label ID="Label3" runat="server" ForeColor="#FF0000" Visible="false" Text="abc"></asp:Label>
      <asp:Label ID="Label4" runat="server" ForeColor="#993300" Visible="false" Text="abc"></asp:Label>
    </div>
  </div>
</body>
</html>
+3
4

, : ASP.NET . , , Cassini App_Themes. , Login.aspx , Cassini - App_Themes. - , -, CSS.

, web.config:

  <location path="App_Themes">
    <system.web>
      <authorization>
        <allow users="*" />
      </authorization>
    </system.web>
  </location>

@matt_ashbury - !

+6

#banner
{
    background: transparent url('<%= Page.ResolveUrl("~/Images/plainBlueHeader2.png") %>') no-repeat 20% 0;
}

, ..

+1

:

url(./Images/plainBlueHeader2.png)
+1

If, as I believe, you have a css folder at the same level as the image folder, then you can also write

background: transparent url(../Images/plainBlueHeader2.png) no-repeat 20% 0;

You can link to images using relative paths (in addition, you can also avoid trailing quotes).

0
source

Source: https://habr.com/ru/post/1775426/

More articles:


All Articles