The form of the background image on the site.
I tried everything to get the image to appear as a background. I am working on my local express installation of Visual Studio, but when I upload to an internet server, it won't display as expected. I had the same problem with header background image, but found a solution that works, but the same solution won't work with form background.
If I put background style tags in the tag div class="page"
, it will appear on both my development environment and internet host servers, but I want my page to be on top of that image (i.e. my app code pages are on top of this background image ...
Any ideas or suggestions?
Site.Master Code Snippet
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MyApp.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title><%=Page.Title %></title>
<link href="~/Styles/site.css" rel="stylesheet" type="text/css" />
<link id="Link1" runat="server" rel="shortcut icon" href="~/favicon.ico" type="image/x-icon"/>
<link id="Link2" runat="server" rel="icon" href="~/favicon.ico" type="image/ico"/>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.style1
{
text-align: center;
}
</style>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
}
/* this code statement below is what I used to solve the header banner issue
but does not work for form background
*/
public string imgHeaderPath = System.Web.VirtualPathUtility.ToAbsolute("~/Images/water-banner.jpg");
</script>
</head>
<body >
<form runat="server" style="background-position: left top; background-repeat: repeat; background-attachment: fixed; background-image: url('/Images/willnotdisplay.jpg')">
<div class="page">
<div class="header" style="background-image: url('<%= imgHeaderPath %>')">
<div class="title">
<h1> <asp:Localize ID="Localize1" runat="server" Text="<%$ Resources:Resource, Title %>" /></h1>
</div>
.
.
.
source to share
You should just do
<div class="header" style="background-image: url('/Images/water-banner.jpg')">
no overhead when using imgHeaderPath
This probably won't show up on your dev machine
Alternatively you can add the following to your site.css file
div.header {background-image: url('/Images/water-banner.jpg');}
and remove the style attribute on the div which should work with both Dev and production
source to share