Background Image not shown in Firefox

ImDaFrEaK

Well-known member
Joined
Jan 7, 2006
Messages
416
Location
California
Programming Experience
5-10
I am using Visual Studio 2005 to visually add Background images to cells within tables on my webpage and it works great, well, only inside the designer and IE. I tried to view the page in Firefox and Netscape Browsers and the Background Images within the cells of the tables are not shown. What causes this and how do I get around it?
 
Last edited:
HTML:
<%@Page Language="VB" MasterPageFile="~/MasterPage2.master" AutoEventWireup="false" CodeFile="NewHome.aspx.vb" Inherits="Default2"title="G3 Player Home" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<table align="center" style="width: 1147px; height: 543px">
<tr>
<td style="background-position: center top; background-attachment: scroll; background-image: url(Images/web new 1 copy.JPG);
width: 100px; background-repeat: no-repeat; height: 531px;">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/web new 1 download button copy.bmp" 
style="z-index: 100; left: 791px; position: absolute; top: 691px" PostBackUrl="~/DownLoad.aspx"/></td>
</tr>
</table>
</asp:Content>

That is the entire code for one of my content pages. The background image within the table works on IE7 but not on Firefox or Netscape; and I clicked the 'Format / Style' in the toolstrip of VS2005 to get to the Style builder for the cell to add the background image. Nothing I typed on my own.
 
Last edited:
It will work if you put single quotes around the path:
HTML:
<td style="background-position: center top; background-attachment: scroll; background-image: url('Images/web new 1 copy.JPG');
width: 100px; background-repeat: no-repeat; height: 531px;">
But I suggest removing the spaces from the filename as it's not a good idea to include them:
HTML:
<td style="background-position: center top; background-attachment: scroll; background-image: url(Images/web_new_1_copy.JPG);
width: 100px; background-repeat: no-repeat; height: 531px;">
 
Back
Top