Struggling with an issue and in need of some quick assistance.
I have an ASP.NET application that utilizes Forms authentication. On the Login.aspx page, I have implemented multiple background images for visual appeal. These image URLs are set using CSS styles defined within the file itself (not part of a theme or similar setup). All the images are stored in an Images folder located at the root level of the website. There exists a separate web.config file in the Images folder that grants access to all users.
The problem I'm facing revolves around inconsistent resolution of the images between the development and production environments. My observations indicate that the site is deployed as a sub-site in production, while we use the Cassini web server in Visual Studio for development. Consequently, starting each path with a backslash (/) works fine in development but fails in production. Removing the backslash causes issues in the development environment.
The CSS definition currently looks like this:
#banner
{
background: transparent url('Images/plainBlueHeader2.png') no-repeat 20% 0;
height: 70px;
top: 21px;
left: 3px;
}
This setting does not work in Development but functions correctly in our QA and Production setups.
To add to the confusion, less knowledgeable colleagues attribute recent additions to the application (which involved adding new pages in a sub-folder) as the cause of the problem. It's worth noting that prior to these changes, ALL pages were situated at the site root.
If more information is needed to assist in finding a solution, feel free to ask any questions.
UPDATE: It appears that one out of three images is displaying properly across all environments. The image associated with the BODY element is showing up, however, the others (one linked to the ID as shown above and another through a CSS class) are not.
UPDATE: Here is the code snippet from my webpage:
<%@ 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; }
/* Additional CSS rules here */
</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>
<!-- Remaining HTML structure -->
</body>
</html>