Can't Set Background on MasterPage - asp.net

I need to set a background for my website so that each web form child of the master page would show the background image.
I've googled it and found a few answers but they didn't do anything.
I am attaching my Master Page html code and an image showing the background I want:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="Pages_MasterPage" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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>Qwik ProjecTrace</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.style1
{
width: 100%;
}
.style2
{
text-align: center;
font-size: 40pt;
color: #0066CC;
}
.style3
{
font-size: x-large;
}
body
{
background:url('/style/images/IMS-Backgroung.jpg') no-repeat left top;
}
</style>
<link href="../Style/site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<table class="style1">
<tr>
<td runat="server" style="direction: ltr">
<asp:Image ID="mes1" runat="server" style="text-align: left" />
</td>
<td class="style2">
<strong style="font-size: 40">Qwik ProjecTrace<br />
<span class="style3">you see what we do 24/7</span></strong></td>
<td runat="server" style="direction: rtl">
<asp:Image ID="mes2" runat="server" style="text-align: right" />
</td>
</tr>
</table>
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
<p></p>
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Does anyone know what is wrong with my code ? And how to set that background?
Thanks ahead

Change body style like this:
body
{
background-image: url('/style/images/IMS-Backgroung.jpg');
background-repeat:no-repeat;
}
Make sure that page from where your are accesing is "sitting" in parent folder of "/style/images/".
I would advice you to use asp.net themes where you can point to image like this: background-image: url('IMS-Backgroung.jpg') and will work for entire web app structure.
More about Themes can be found on ASP.NET Themes and Skins

Here's the code solution (It seems that in my case, I had some kind of a problem with the containing folders):
body
{
background-image: url('../style/images/Background.jpg');
background-repeat:no-repeat;
}

Related

show an Image on Click of a LinkButton Control

How to show an image in ContentPlaceHolder4 on click of a Link Button which is placed on ContentPlaceHolder3.
I Have a Master Page and one content page. On master page i have a link INSTRUMENTS by clicking on which i am redirected to content page INSTRUMENTS. Now i have 10 LINK BUTTON controls on my Content Page and i want on the click of each link button corresponding image should open on same content page but in different CntentPlaceHolder. Please guide me how to add code for Link Button Click and how to render iamge on click of Link Button.
Following is the code i have added till now.
**This is My Master Page**
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.style1
{
}
.style2
{
width: 162px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div> <img src="IMAGES/main.png" style="background-color: #99FF99; border-top-color: #800000; width: 1082px; height: 105px;" />
</div>
HOME INSTRUMENTS LOGIN
ADDRESS
<table style="width: 100%; height: 288px; margin-top: 11px;">
<tr>
<td bgcolor="#FF0066" align="center" class="style2"
style="text-align: center; vertical-align: top;">
<asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
</asp:ContentPlaceHolder>
</td>
<td bgcolor="#33CCCC" class="style1">
<asp:ContentPlaceHolder ID="ContentPlaceHolder4" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</form>
</body>
</html>
**This is My Content Page**
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="INSTRUMENTS.aspx.cs" Inherits="INSTRUMENTS" %>
<asp:Content id="content3" ContentPlaceHolderID="head" runat="server">
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder3" Runat="Server">
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="lkbutton_click">Sitar</asp:LinkButton><br />
<asp:LinkButton ID="LinkButton2" runat="server">Harmonium</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton3" runat="server">Tabla</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton4" runat="server">Drum</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton5" runat="server">Guitar</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton6" runat="server">Sarod</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton7" runat="server">Flute</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton8" runat="server">Santoor</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton9" runat="server" onclick="LinkButton9_Click">Keyboard</asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton10" runat="server">LinkButton</asp:LinkButton>
</asp:Content>
<asp:content ID ="C2" ContentPlaceHolderID ="ContentPlaceHolder4" runat="Server">
<asp:Image ID ="I1" ImageUrl ="~/IMAGES/F.png" >
<asp:Image />
</asp:content>
in your design page use like this.
<asp:Content ContentPlaceHolderID="ContentPlaceHolder4" Runat="Server">
<img id="img1" runat="server" />
</asp:Content>
and in code behind link button click event like below:
protected void lkbutton_click(object sender, EventArgs e)
{
img1.Src = "~/images/sonata-logo.png";
}
i tested it it's working fine.
but put the correct path of image then only it will show.
Thanks
<asp:LinkButton ID="LinkButton1" runat="server" width="250px" height="250">
<img runat="server" id="IL"src="~/Class/Adds/0/4.jpg" width="250" height="250" />
</asp:LinkButton>
With this you can change the picture with server code.
il.SRC = "~/Class/Adds/0/7.jpg"

Basic Center Aligning with CSS in ASP.NET

My apologies for how basic this question is but I'm in the early stages of trying to learn ASP.NET, having had a largely WinForms background.
I am creating a Master Page with a Menu Bar on it and am failing to even get the Menu to center on the page.
My mark up is as follows -
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Page Title</title>
<link href="CSS/Master.css" rel="stylesheet" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="HomeForm" runat="server">
<div id="MainDiv">
<asp:Panel ID="HeaderPanel" HorizontalAlign="Center" runat="server">
<header>
<img src="/Artwork/Webhead.jpg" />
</header>
</asp:Panel>
<div id="MenuDiv">
<asp:Menu ID="MainMenu" runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" StaticEnableDefaultPopOutImage="False"></asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
</div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
And my CSS is as follows -
*
{
font-family: Calibri
}
#MainDiv
{
margin: auto;
background-color: cyan;
}
#HeaderPanel
{
}
#MenuDiv
{
margin: auto;
}
#MainMenu
{
margin: auto;
background-color: yellow;
align-self: center;
}
The logo in the section centers ok, but the Menu doesn't.
Any help would be much appreciated.
try this
#MainMenu{
display: table;
margin: 0 auto;
}

This page is missing a HtmlHead control which is required for the CSS stylesheet link that is being added. Please add <head runat="server" />

i have page and add Ajax extension but it throwing error for me
i am using master page so this page doesn't have <head>
page code
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%# Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" runat="server" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<table style="width: 100%">
<tr>
<td colspan="5" style="text-align: center; height: 20px;">Search </td>
</tr>
<tr>
<td style="text-align: center; height: 20px;">Ticket number</td>
<td style="text-align: center; height: 20px;">Client name</td>
<td style="text-align: center; height: 20px;">Address</td>
<td style="text-align: center; height: 20px;">Assigned to</td>
<td style="text-align: center; height: 20px;">Date</td>
</tr>
<tr>
<td style="width: 157px">
<asp:TextBox ID="txt_incID" runat="server" Width="146px"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="txb_ClientName" runat="server" Width="146px"></asp:TextBox>
</td>
<td>
<asp:DropDownList ID="ddl_Address" runat="server" Width="146px" DataSourceID="Ds_address" DataTextField="StrName" DataValueField="StrID">
<asp:ListItem Value="null"></asp:ListItem>
</asp:DropDownList>
</td>
<td>
<asp:DropDownList ID="ddl_EmpID" runat="server" Width="146px" DataSourceID="DS_Employee" DataTextField="LastName" DataValueField="EmpID">
<asp:ListItem Value="null"></asp:ListItem>
</asp:DropDownList>
</td>
<td>
<asp:TextBox ID="txb_date" runat="server" Width="146px"></asp:TextBox>
<asp:CalendarExtender ID="txb_date_CalendarExtender" runat="server" Enabled="True" TargetControlID="txb_date">
</asp:CalendarExtender>
</td>
</tr>
<tr>
<td style="width: 157px"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width: 157px"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br />
<br />
<asp:SqlDataSource ID="Ds_address" runat="server" ConnectionString="<%$ ConnectionStrings:TicketsConnectionString %>" SelectCommand="SELECT * FROM [Streets]"></asp:SqlDataSource>
<asp:SqlDataSource ID="DS_Employee" runat="server" ConnectionString="<%$ ConnectionStrings:TicketsConnectionString %>" SelectCommand="SELECT * FROM [Employee]"></asp:SqlDataSource>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</asp:Content>
in other topics people recommend add this
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
but I have it on my page. Any ideas how to fix?
Master page code
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Tickets</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|Archivo+Narrow:400,700" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
.Buttons
{
font-family: Tahoma;
font-size: large;
background-color: #999999;
border-bottom-color: #FF0000;
border-style: none none outset none;
}
.Logins
{
font-family: tahoma;
color: #FF0000;
}
.ButtonsInSite
{
font-family: tahoma;
background-color: #C0C0C0;
border-color: #FFFFFF #FFFFFF #FF0000 #FFFFFF;
border-bottom-style: double;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
box-shadow: 0px 2px 9px #800000;
font-weight: bold;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="header-wrapper">
<div id="header">
<div id="logo">
<h1>Tickets</h1>
<div style="text-align: right">
<asp:LoginName ID="LoginName2" runat="server" CssClass="Logins" />
|
<asp:LoginStatus ID="LoginStatus1" runat="server" CssClass="Logins" />
</div>
</div>
</div>
</div>
<div id="wrapper">
<!-- end #header -->
<div id="page">
<div id="page-bgtop">
<div id="page-bgbtm">
<div id="sidebar">
<h2>Navigation</h2>
<asp:Button ID="Button1" runat="server" Text="Button" Width="118px" CssClass="ButtonsInSite" />
<br />
<asp:Button ID="Button2" runat="server" Text="Button" Width="118px" CssClass="ButtonsInSite"/>
<br />
<asp:Button ID="Button3" runat="server" Text="Button" Width="118px" CssClass="ButtonsInSite"/>
<br />
<asp:Button ID="Button4" runat="server" Text="Button" Width="118px" CssClass="ButtonsInSite"/>
<br />
<asp:Button ID="Button5" runat="server" Text="Admin" Width="118px" CssClass="ButtonsInSite" PostBackUrl="~/Admin/AdmStart.aspx"/>
<br />
</div>
<!-- end #sidebar -->
<div id="content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<!-- end #content -->
<div style="clear: both;"> </div>
</div>
</div>
</div>
<!-- end #page -->
</div>
<div id="footer">
<p> © 2013</p>
</div>
<!-- end #footer -->
</form>
</body>
</html>
May be this will help you.
Master page Html
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
Child Page Html
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">Add Scripts here</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
Add Page Content Here</asp:Content>
Add in the master page
<head runat="server">
In a child page header ContentPlaceHolderID just add <head runat="server"></head>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder2Header" runat="Server">
<head runat="server">
</head>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
</asp:Content>
Can you add <head runat="server"> to the master page??
In Master Page add
<head id="Head1" runat="server">
//Other script
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
In child page add
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
//add script for child page
<script>
</script>
</asp:Content>
Try this
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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">
<head runat="server">
in the MASTER PAGE code!
Just substitute <head> for <head id="head1" runat="server">

RadSplitter Remove Borders not working

I am working on an Asp .net project and i Am using RadSplitter to split me website. I want to remove the borders from the splitter. Here is my asp code below, i remove the borders but they are still appear. Can anyone help me please?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="webbetv1.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%# Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<html runat="server">
<head >
<style type="text/css">
.RadSplitter .pane,
.RadSplitter .paneHorizontal
{
border: 0px !important;
padding: 0px !important;
}
.style1
{
width: 100%;
margin-bottom: 33px;
}
</style>
<script type="text/javascript">
//Put your JavaScript code here.
</script>
</head>
<form id="Form1" runat="server">
<body>
<telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<div style="height:800px; width: auto;">
<telerik:RadSplitter ID="MainSplitter" runat="server" Width="100%" Height="100%" ExpandMode="FullExpandItem"
Orientation="Horizontal" LiveResize="false" BorderSize="0" BorderWidth="0px" BorderStyle="None" CssClass="pane" >
<telerik:RadPane ID="TopPane" runat="server" Height="120" MinHeight="85" MaxHeight="150" BorderWidth="0px"
Scrolling="none" CssClass="pane" >
<asp:PlaceHolder ID="PlaceHolder3" runat="server"></asp:PlaceHolder>
<table class="style1">
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
sadasd</td>
<td>
</td>
</tr>
</table>
</telerik:RadPane>
<telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" Height="100%" BorderWidth="0px" BorderStyle="None" />
</telerik:RadSplitter>
</div>
</body>
</form>
</html>
Try adding
border: none;
to your .pane css class.
I had the same problem and I had to add that to the css class as well as setting BorderStyle="None" and BorderSize="0" . I'm working with a master page and I suspected that the property was being overwritten somewhere.
No css should be necessary in order to remove the borders:
On the RadSplitter set:
PanesBorderSize="0" BorderWidth="0"
On the RadPane set:
BorderWidth="0"
Now that the image is visible, maybe you just want to hidden the RadSplitBar. In that case you can both remove it or just set Visible="False".

asp.net add background image to a few pages using single masterpage

I am trying to add background images to only a few pages where as the other pages will not have one. Do I need a separate masterpage for the pages with background images or can I do this by overriding the existing styles?
My last attempt has a nested div with the image...
page with background:
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="Burgundy.aspx.cs" Inherits="WineCellar.UI.Pages.Burgundy.Burgundy" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ApplicationContent" runat="server">
<div style="background-image: url(~/Images/burgundy.png); height: 430px; width: 940px;">
</div>
</asp:Content>
masterpage:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage.master.cs" Inherits="WineCellar.UI.MasterPage" %>
<!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></title>
<link rel="Stylesheet" type="text/css" href="/Styles/Site.css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="PageWrapper">
<div id="Header"><a id="A1" href="~/" runat="server">need a header</a></div>
<div id="MenuWrapper">
<asp:Menu ID="Menu1" runat="server" CssClass="MainMenu" DataSourceID="SiteMapDataSource1"
Orientation="Horizontal" StaticEnableDefaultPopOutImage="False">
<StaticMenuItemStyle HorizontalPadding="6px" VerticalPadding="2px"/>
<DynamicHoverStyle BackColor="#CC3300" ForeColor="#310062" />
<DynamicMenuStyle BackColor="#310062" />
<StaticSelectedStyle BackColor="#CC3300" />
<DynamicSelectedStyle BackColor="#310062" />
<DynamicMenuItemStyle HorizontalPadding="6px" VerticalPadding="4px"/>
<StaticHoverStyle ForeColor="White" BackColor="#310062" />
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
</div>
<div id="MainContent">
<asp:SiteMapPath ID="SiteMapPath1" runat="server" CssClass="breadCrumbTrail">
<RootNodeTemplate></RootNodeTemplate>
</asp:SiteMapPath>
<br />
<h1>Title</h1>
<br />
<br />
<asp:ContentPlaceHolder ID="ApplicationContent" runat="server"></asp:ContentPlaceHolder>
</div>
<div id="Footer"><%=DateTime.Now.Year.ToString() %></div>
</div>
</form>
</body>
</html>
maincontent style:
#MainContent
{
background-color: #310062;
width: 940px;
height: 480px;
color: #ffffff;
min-height: 480px;
padding: 10px;
font-size: 0.8em;
float: left;
}
Thanks for any help!
put a contentplaceholder in the head, and in each page put a style tag with the extra div styling in it. probably not the best way to do it, but would work for a few pages only.
<style>#MainContent{background-image:url(~/Images/burgundy.png);height:430px;width:940px;</style>
this should override the style you set in your external css file.
(although ideally all css should be placed in external css files, and not style tags)
Create a style sheet just for the child page. Use the body tag to apply the CSS style.
body {
background-image: url('images/background-image.png');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
vertical-align: top;
background-position: 0% 20%;
}
Tested and working solution.

Resources