CODEWITHSUNDEEP
c#javascriptasp.net
DesignerMind
DesignerMind

Reputation: 410

Background Image In Aspx Content Page Won't Change On Page Load

I have searched and searched for an answer to this across the web, yet I have not found a "clearly stated" answer as to why this is happening. And I have re-worked to no avail.

  1. I have a Asp.Net site, with a "Master Page" and few "Content" pages

  2. There is a CSS file which successfully assigns a "background-image" in the body - for all the pages:

    body { background-image: url('../Images/TestImage1.jpg'); }

  3. I have another image, say TestImage2.jpg, which sits in same Images folder in the solution, and I want to display this image on a specific "Content Page" when that page loads. Yet, it is not loading on the page, and background just turns white without any image at all - here's my code:

My MasterPage has the correct items for runat="server": 

<head runat="server"> 
<title></title>    
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>

... and also...

<body runat="server">
<form style="height: 906px" runat="server">

Now, here's my code-behind for the content page I wish to have new image appear on Page_Load:

using System;
using System.Text; 
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class TechCall : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
    StringBuilder script = new StringBuilder();
    script.Append("<script type=\"text/javascript\">");
    script.Append("document.body.style.background = \"url('../Images/CPUBack2nd.jpg')\";");
    script.Append("document.body.style.backgroundRepeat = 'no-repeat';");
    script.Append("</script>");

    this.ClientScript.RegisterClientScriptBlock(this.GetType(), "changeBackground", script.ToString());
}    
}

CPUBack2nd.jpg is the actual of name of the image in place of TestImage2.jpg, but as far as I can see, I am using the correct path for the image, as like the one in the CSS file which defines the default background image. Yet, when the page loads, no image at all appears for the background - just a white space, and original image appears on other pages correctly.

Can someone examine and tell me what I am missing here? Note: please don't suggest JQuery, as if it can be solved using Javascript, then I wish to stick with this usage, as I just want to learn to make it work with JS.

Upvotes: 1

Views: 2131

Answers (2)

DesignerMind
DesignerMind

Reputation: 410

After much wrangling, moving some things around and isolating them in the CSS style sheet to clean up the Master page, where I had some stray CSS classes, AND of course building on the "hunch" provided by Jon P on possible root relative with Javascript, here's what did it:

Instead of using this:

script.Append("document.body.style.background = \"url('../Images/TestImage1.jpg')\";");

The answer was to use this:

script.Append("document.body.style.background = \"url('/MyProjectName/Images/TestImage2.jpg')\";");

So, I don't know why I had go all the around the world it seems to figure that out, but I guess that's how it is with programming... the difference ALWAYS lies in the LITTLE THINGS!

Thanks to all who contributed to getting me to think about what was going on here! Hence, the lesson is also THIS CAN BE DONE WITH JAVASCRIPT. :)

Upvotes: 1

Jon P
Jon P

Reputation: 19802

I'd suggest not using javascript at all. You should have a handy ContentPlaceHolder in the header section. Add the following in there to overide the default body style

<style type="text/style">
    body  { background-image: url('../Images/TestImage2.jpg'); }
</style>

As this will appear in the page after the head contents of the materpage it will overide the earlier CSS.

I would also consider using Root Releative paths particularly on master pages as it makes the releative location of the calling document and the called resource irrelevant. In which case change the above to:

<style type="text/style">
    body  { background-image: url('/Images/TestImage2.jpg'); }
</style>

Assuming that the Images directory resides at the root level of your document.

If you really want to persist with javascript. Check the path or use Root Relative. Remember that the path is relevant to the document calling the resorce. So just because a path works in a CSS file does not mean it will work in a page which sits at a diferent level of the website. Use a CSS debug tool Like FireBug for Firefox (a free download) or Developer Tools in Chrome (in built) to check if the image was at the expected location.

Upvotes: 1

Related Questions