Image not appearing in dev server when deployed

0
votes

I 'm using this css to insert an image at right corner of the textbox to appear like a dropdown.

.txtbox
{
background-image: url('/Images/Dropdown.png');
background-position: right center;
background-repeat: no-repeat;
cursor: pointer;
cursor: hand;
}

The image appears perfectly with this type of path reference in my local machine. But when I deployed it to the server the image doesn't show up. Is there something I could differently do to make the image appear in my dev server.

My Directory C:\inetpub\wwwroot\WebApp 

bin
docs
Images
Scripts
Styles
Default.aspx
Login.aspx
Home.aspx

**Styles:**
style.css
site.css

Style.css has this .txtbox

**Images**
Dropdown.png
Logo.png
2
asp.netcss
If the deployment path is not the same as the deveplopement path, relative to domaine. You could try user relative path (relative to CSS location). Et: your develop on http//localdomain/, the css is in localdomain/styles/main.css , your deployment path is deployeddomain/somefolder/yourapplication, your image in localdomain/images/Dropdown.png , then change the path to ../images/Dropdown.png) Not enough info to be sure this is targetting you problem, but this kind of things happen. – TTT

2 Answers

1
votes

It is a good practice to use relative paths in HTML/CSS. When you begin a path with / it becomes relative to the root of the server. Change the image path relative to the CSS file location. It should work.

0
votes

Primary issue: if you are developing on a windows machine then your local machine is not case sensitive, but a linux server might be. Make sure that Dropdown.png is capitalised the same in the HTML and as the file name.

Secondary possibilities:Possible reference error. Try changing the href URL to //Images... and see if that makes any difference. Also inspect the element in a browser and check where the reference is currently pointing to. Alternately, use the full path, eg 

http://www/mysite.com/Images/Dropdown.png

while it is on the server.