0

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?

Serenity
  • 4,968
  • 19
  • 65
  • 104
  • Has the selector changed? If your using the id as the CSS selector, now that it's a user control it might be different. – Michael Shimmins Oct 12 '10 at 07:07
  • my webform had a masterpage ..now when I added this usercontrol on a test page that's got no masterpage,nothing..the image appeared..why is that? – Serenity Oct 12 '10 at 07:33

2 Answers2

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.

Mouhannad
  • 2,209
  • 1
  • 14
  • 12
  • sorry couldn't post the test page code due to some reason...soo I checked the Page Source minutely again and guess what some div tag IDs have changed! ..I got this one div who's ID is "div1"..inside of this div is my Sprite image..now this "div1" is being changed to "ctl00_ContentPlaceHolder2_ctl00_Banner_ctl00_ContentPlaceHolder2_ctl00_Banner_div1" ...Banner is variable of type UserControl declared in my test page(I am adding UserControl in code behind)...now what do I do about these changing IDs? plz help..thnx – Serenity Oct 20 '10 at 04:17
0

I had this same issue. I solved it by simply using an <asp:Image /> control in the .ascx page and then it worked. Referenced the ImageUrl to the images folder.

GenXisT
  • 298
  • 4
  • 10