Image from usercontrol won't display on webform

Question

I added this code in my ascx file http://jsfiddle.net/xkRcN/8/ ..When it was aspx file..the image(location is "Images" folder in my project now..was flickr earlier) would display alright..but when I made this page into a user control and added it in my webform, the image's vanished..I have tried changing the path many times but its not working..The user control is inside of "usercontrols" named folder..image inside of "images" named folder in my page and my aspx page's at root level only..so I changed the image path in the css of usercontrol as follows:-

background-image: url(../images/myImage.jpg);

even tried

background-image: url(../../images/myImage.jpg);

and this

background-image: url(~/images/myImage.jpg);

but the Sprite image just won't display

Everything else in the usercontrol is getting displayed well ..just that image's missing..whats wrong?

Answer 1

As @Michael suggested first test if the rendered html (view source code in your browser) has changed any of the ids that you are trying to style. The asp.net controls will have their ids changed when you are using usercontrols and masterpages

Also check (in your browser) if he image does exists by putting the full path of that image. So if you know the image is in http://example.com/images/myImage.jpg and your page (doesn't matter if you use usercontrols) http://example.com/pages/page1.aspx then you know you should do this:

background-image: url(../images/myImage.jpg);

If nothing works, then just do this:

background-image: url(http://example.com/images/myImage.jpg);

Good luck!

Edit

Since you found out the id change is what caused the problem, the only solution is to use classes to style your html markups:

html

//some people don't know this but you can also put the style directly into the
//asp.net control event if visual studio doesn't support it in the intellisense
<asp:Label id="label1" CssClass="test" style="color:blue;" runat="server" />

css

.test { color:red; }

If you still want to use the id to style your code, then you can either put the long generated id into your css code or upgrade to asp.net 4 which gives control over your asp.net ids, for example:

<asp:Label id="label1" ClientIDMode="Static" runat="server" />

There are 3rd party solutions to give your control over the ids for asp.net 3.5 and below but they are not out of the box and needs some fiddling.