Share via

Master page background image

  • Article

Question

Tuesday, January 13, 2009 10:56 AM

I have a default1.master page that contains a background image and menu bar site map. I created a new page and specified the use of the master page during it's creation.

It looks good.   I created another new page, and I specified the master page during it's creation but only the menu bar displays, the background image does not??? 

Any ideas?

 

All replies (11)

Friday, January 16, 2009 2:45 AM ✅Answered

Hi,

The image path is basing on its host page. If we use "background="Images/CommonBG.jpg"" in the subfolder, this path expects the Image folder under this subfolder.

To work around it, we can use "~/" to point to root folder and convert it to right path. For example:

<%@ Master Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void Page_Load(object sender, EventArgs e)
    {

    }

    ***public string imgPath = System.Web.VirtualPathUtility.ToAbsolute("~/Images/CommonBG.jpg");
***</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
 ***   <div style="background-image: url('<%= imgPath %>')">
***        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
                 Content Page
       
        </asp:contentplaceholder>
        </div>
    </form>
</body>
</html>

 

I look forward to receiving your test results.

Sunday, January 18, 2009 9:07 PM ✅Answered

Hi,

Thanks for your response.

From your code above, we need to declare that variable in the server code instead of client code, and the example I posted above is using C#.

In your case, we can declare that variable in codebehind class I.E. "Default1.master.vb":

Partial Class MasterPage
    Inherits System.Web.UI.MasterPage
    Public imgPath As String = System.Web.VirtualPathUtility.ToAbsolute("~/Images/CommonBG.jpg")
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

 

End Class

 

Thanks.

Tuesday, January 13, 2009 11:09 AM

Here is another clue, that may help you help me.

If a new web page sits on the root of the application, it appears to use the background image.

However, If I create the web page inside a folder on the root, it seems this is when the background image does not display.  Does this make sense?  

 

 

Tuesday, January 13, 2009 11:52 AM

I found some others who had the same problem. I'm trying to work through fixes but I still can't get the BG image to display on a page in a subfolder.

Currently the image is assigned like this:  (displays image on master page, but not on pages in sub folder)

background="../MySite/Images/CommonBG.jpg"

If I assign like this I don't even get an image on the masterpage:

background="/MySite/Images/CommonBG.jpg"

This produces an image on the background page, but not on the pages in a sub folder:

background="Images/CommonBG.jpg"

Can you assist. Thanks 

 

Friday, January 16, 2009 3:05 PM

Thank you Thomas,

I put your suggestion in the html where I thought it might go. Below is the code from the master page. When I go to run, I get errors stating 'imgpath' is not declared .

I am using VB (not sure if that would change your code or not). I also tried defining imgpath like Public imgPath as String = ...... that did not work either. 

Any ideas?

 

%@ Master Language="VB" CodeFile="Default1.master.vb" Inherits="Default1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
<script language="javascript" type="text/javascript">
 protected void Page_Load(object sender, EventArgs e)
    {

   }
     public string imgPath = System.Web.VirtualPathUtility.ToAbsolute("~/Images/CommonBG.jpg");

</script>
</head>
<body  style="background- 3%; background-repeat:no-repeat; ">
    <form id="form1" runat="server">
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" /> 
         <div style="background-image: url(' <%= imgPath %>')">
    <div id="Header"></div> 
    <div id="space" style="height:70px"></div>
    <div align=center id="Menu">
          <asp:Menu ID="Menu1"  style="text-align:Left" runat="server"  DataSourceID="SiteMapDataSource1" BackColor="#FFFFCC" DynamicHorizontalOffset="2" Font-Names="Arial" Font-Size="14px" ForeColor="Purple" Orientation="Horizontal" StaticDisplayLevels="2" StaticSubMenuIndent="13px" Width="888px">
            <StaticSelectedStyle BackColor="#FFCC66" />
            <StaticMenuItemStyle HorizontalPadding="8px" VerticalPadding="2px" />
            <DynamicHoverStyle BackColor="#990000" ForeColor="White" />
            <DynamicMenuStyle BackColor="#FFFBD6" />
            <DynamicSelectedStyle BackColor="#FFCC66" />
            <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
            <StaticHoverStyle BackColor="#990000" ForeColor="White" />
        </asp:Menu> 
        </div>
    <div align=center id="content">
              <table align=center>
            <tr>
                <td style="width: 262px">
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
                </td>
            </tr>
        </table>
       </div>
    </div>
    </form>
</body>
</html> 

Thursday, April 2, 2009 5:20 AM

Thank you Thomas. It helped me too.

Monday, August 10, 2009 11:01 PM

it works,,,,i hve tried lot of tricks earlier.....but none of them works...

thanks

Friday, December 11, 2009 9:56 AM

Thomas,

Thank you very much for your nice answer.

I was looking for this solution since last couple of days.

Romah

Wednesday, June 2, 2010 1:20 AM

Helped  me too thanks gurus

Thursday, March 15, 2012 12:26 AM

Hi THomas, thanks for the code. Is really helpful. but currently, i'm facing another problem. 

The size of the image in my master page is different from the size of my image in login.aspx.

Is there any way i can resize it?

thanks

Friday, June 22, 2012 5:34 AM

I searched also lot of pages but mostly people donot know the solution. Today, I found the solution for it.

1-Please insert ImageButton from toolbar in design format instead of Image. Mostly people are using Image that is why you are not getting Image display in pages.

2. Then use imgeurl property in Properties window by pressing F4 key and select your source image.

This will work 100%.