Image wont render on my aspx page after adding master page..if not changed ID ..what else could be the reason?

Question

used the following code to get rid of the system generated ID:-

Banner.ascx.cs

protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
    StringWriter Html = new StringWriter();
    HtmlTextWriter Render = new HtmlTextWriter(Html);
    base.Render(Render);
    writer.Write(Html.ToString().Replace("id=\"ctl00_ContentPlaceHolder2_ctl00_Banner_", "id=\""));
}

using the above code its rendering the ID as the original one (ie "div1"..earlier it would render the div's ID as "ctl00_ContentPlaceHolder2_ctl00_Banner_div1"...so I thot changed ID is the reson its not displaying my image) only but still the image won't display...

testClass.aspx :-

<div id="div1" class="id0" style="background-image: url(<%=GetImage()%>);">
    <ul>
        <li>
        <li>
        .
        .
        .
    </ul>
</div>

testClass.aspx.cs

public partial class testClass : System.Web.UI.Page    
{
    Control userControlBanner;
    UserControl Banner;
    Content c1;

    protected void Page_PreInit(object sender, EventArgs e)
    {            
        this.MasterPageFile = (String)("~/master1.master");
        c1 = new Content();
        string uc = "~/usercontrols/Banner.ascx";
        userControlBanner = Page.LoadControl(uc);
        userControlBanner.ID = "Banner";
        c1.Controls.Add(userControlBanner);
        this.Master.FindControl("ContentPlaceHolder2").Controls.Add(c1);
    }
}

Banner.ascx

Now when the code above is rendered in the page source I see the complete image path as "http://localhost/myweb/images/myImage.jpg" and I can see the image when I type this address 'http://localhost/myweb/images/myImage.jpg" in browser why wont the image appear on my aspx page !? :((

I tried so hard to get rid of the system generated ID and still the image wont display! :((

Edit1:

ok I even gave the path(where the image actually is) of the image as this :- "F:\WS\myweb\images\myimage.jpg" ...it should at least show now!.. isn't it? Is the image getting hidden behind some other page element or what?

god I am stuck at this like anything :((

Edit2:

ok I tried what mxmissile said..added one div tag on my test page and assigned user control to that instead of "ContentPlaceHolder" (though I want the banner there only) ... now the image's still not appearing..everything else's fine..the list elements and all..just that image is not appearing...I removed everything from the usercontrol but the sprite image thinking may be the image's getting hidden or something behind that List of links..still no image :( somebody help please. Thanks!

Edit3:

When I opened Firebug..under "Style" section ...its showing the image path striked out..why is that ???

Edit4:

found out style was overridden..I gave background image in my css and same in the div tag with ID=id0..removed the background-image property from div tag..now image path's only in css...so no more striked out text..still the image's not appearing....path of the image's correct...in "Style" section in firebug..I can see the image when I hover over

.id0, .mySprite:hover div {
background-image:url("http://localhost/myWeb/images/myImage.jpg");

Why don't I see the banner image on my page?

Edit5:

changed this:

.id0, .mySprite:hover div
{
    background-image: url(../images/myImage.jpg);
    background-repeat: no-repeat;
}

to this:

.id0, .mySprite:hover div
{
    background-image: url(../images/myImage.jpg);
    background-repeat: no-repeat;
    width: 728px;
    height: 243px;
}

still nothing ! :((( If it's not even size issue, what is it ???

Edit6:

Image's being fetched now from a method... url(<%=GetImage()%>); this method's returning the path alright..just don't see no image on my page ..what's wrong ??

[EDIT 7]

Its only after adding master page that this Sprite got screwed up..was working great earlier..

Answer 1

markup:

<div id="div1" class="c1" runat="server" ></div>

codebehind:

div1.Controls.Add(userControlBanner);

Dont set the image path to the F:ws... location use your original path "/images/myImage.jpg" or even better "~/images/myImage.jpg"

Answer 2

Have you tried viewing in a different browser?

Answer 3

testClass.aspx Page Source :-

<div id="div1" class="id0" background-image: url(<%=GetImage()%>);>

This is not HTML, not even valid XML. Use

<div id="div1" class="id0" style="background-image: url(<%=GetImage()%>);">

instead. (Ultimately, you should put the background-image declaration in a stylesheet, but that could be cached, which is one more headache while testing.)

Also, get rid of the negative z-indexes while you are testing.

Answer 4

Have you added the image to the Visual Studio solution?

I notice that sometimes images are not displayed when they are not added to the solution, as strange as it is.

Answer 5

In one of your comments you stated :

" In the css too path's showing like this when I view Page Source "background-image: url(localhost/myweb/images/myImage.jpg);"

In this case the browser will be looking for a relative folder named localhost/... up to the file myImage.jpg , you need to provide a valid url (absolute or relative)

Either:

• background-image: url(http://localhost/myweb/images/myImage.jpg);

or

• Assuming your test page path is http://localhost/myweb/testClass.aspx :

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

Check getting base url of web site's root (absolute/relative url) and ASP.NET - Themes and Relative Referencing

Answer 6

Does your master page have css with <li> tag's background property set to something? Maybe that's causing the background of you div to be hidden.