Master Page background image only visible from pages in root directory
I hope I can explain this well enough to understand. I have a master page that is used by almost all of the pages in my site. On the master page is a table. In one of the cells in this table, I have set the background to display an image that is located in a directory called "images" which is just off the root directory. Here's the problem:
Any page that is not located in the root directory (where the master page is located) cannot see the background image. Pages that ARE located in the root directory can. I have tried using "~/images/filename.jpg" for the background source but this didn't work. In fact, the only that has worked so far is to put the full URL ("http://www.mysite.com/images/filename.jpg") for the background source. I'm still relatively new to ASP.NET 2.0 and I don't know what (if any) problems using the full URL might cause.
Can anyone suggest a solution (or is using the full URL for this the correct way to go).
Thanks!
Any page that is not located in the root directory (where the master page is located) cannot see the background image. Pages that ARE located in the root directory can. I have tried using "~/images/filename.jpg" for the background source but this didn't work. In fact, the only that has worked so far is to put the full URL ("http://www.mysite.com/images/filename.jpg") for the background source. I'm still relatively new to ASP.NET 2.0 and I don't know what (if any) problems using the full URL might cause.
Can anyone suggest a solution (or is using the full URL for this the correct way to go).
Thanks!
ASKER
Well...I'm not feeling very smart at the moment. I've searched through all of the books I'm using to learn ASP.NET 2.0 and none of them has Application Name in the index. Can you elaborate on this or perhaps point me to a resource that explains what this is, where it happens, and how to access it? I'm increasing the point value of this question to reflect the added complexity. Thanks again!
make sure you use the runat="server" command.
eg <img src="~/images/filename.jpg
eg <img src="~/images/filename.jpg
ASKER
Thanks skiltz...but this is a cell background - doesn't use <img src=""> It uses <td background="~/images/filen
I did try adding runat="server" to the <td> tag and the <table> tag but it didn't help.
I did try adding runat="server" to the <td> tag and the <table> tag but it didn't help.
try this. if you already have a css file then don't create a new one.
in the msterpage (master.master or whatever you have called it)
Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)
Dim link As HtmlLink = New HtmlLink()
'this will be from the root so we are good now.
link.Href = "~/css/images.css"
link.Attributes.Add("rel",
link.Attributes.Add("type"
Page.Header.Controls.Add(l
End Sub
' css file images.css
.bgimage
{
background-image: url(../images/filename.jpg
}
<td class="bgimage" runat="server">
in the msterpage (master.master or whatever you have called it)
Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)
Dim link As HtmlLink = New HtmlLink()
'this will be from the root so we are good now.
link.Href = "~/css/images.css"
link.Attributes.Add("rel",
link.Attributes.Add("type"
Page.Header.Controls.Add(l
End Sub
' css file images.css
.bgimage
{
background-image: url(../images/filename.jpg
}
<td class="bgimage" runat="server">
Here are a few articles on handling relative paths,
http://west-wind.com/weblog/posts/269.aspx
http://www.awprofessional.com/articles/article.asp?p=101145&rl=1
There was a really good article once on handling relative paths, but it seems to have gone dead and I can't find another link other than google's cached version?
http://72.14.209.104/search?q=cache:XJcop1vWyFMJ:www.dotnetdashboard.com/DesktopDefault.aspx%3Ftabindex%3D3%26tabid%3D64+Bustamante++relative+paths&hl=en&gl=us&ct=clnk&cd=1
http://west-wind.com/weblog/posts/269.aspx
http://www.awprofessional.com/articles/article.asp?p=101145&rl=1
There was a really good article once on handling relative paths, but it seems to have gone dead and I can't find another link other than google's cached version?
http://72.14.209.104/search?q=cache:XJcop1vWyFMJ:www.dotnetdashboard.com/DesktopDefault.aspx%3Ftabindex%3D3%26tabid%3D64+Bustamante++relative+paths&hl=en&gl=us&ct=clnk&cd=1
ASKER
I've read a bit more on this subject and tried the following solution. Problem is the background image doesn't appear at all now and I can't figure out why. All the other stylesheet elements work (I've tested this by changing fonts and sizes). Any idea what I'm doing wrong? Thanks:
--------------------------
Web.config
--------------------------
<system.web>
<pages theme="Default"></>
</system.web>
--------------------------
Stylesheet.css
--------------------------
.mpagetopctr
{
font-family: Verdana;
font-size: medium;
background-image: url(App_Themes/Default/Ima
}
--------------------------
Masterpage.master
--------------------------
<table>
<tr>
<td class="mpagetopctr" runat="server">
Header Text
</td>
<tr>
<table>
--------------------------
Web.config
--------------------------
<system.web>
<pages theme="Default"></>
</system.web>
--------------------------
Stylesheet.css
--------------------------
.mpagetopctr
{
font-family: Verdana;
font-size: medium;
background-image: url(App_Themes/Default/Ima
}
--------------------------
Masterpage.master
--------------------------
<table>
<tr>
<td class="mpagetopctr" runat="server">
Header Text
</td>
<tr>
<table>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Odd...I didn't notice before but the Style Builder in WebDev Express 2005 left off the "/" at the beginning of the url. You're right...that fixed it. Thanks!
In your example of the full url, it does not contain your application (unless your application is named "images"). If this images folder can be guaranteed to be at the root no matter where the document might lie, Might I suggest using "/images/filename.jpg"