 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
.NET Forum / ASP.NET / General / September 2007How to fill background of page with gradient
I want to fill the entire background of a page with a gradient. As a test, I first filled with a solid color like this: <body style="background-color: #ccffff;" > and the entire page was this color. next I replaced that with a gradient style like this: <body style="filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr= 'white' , EndColorStr= '#e9f5ff' );" > and I entered a few words of text in a div take. the only area with color was the div tag. Lastly I moved the style to a css class and set all the proper references and I got nothing. I also did a Google before making this post with no luck. Please advise. Thanks.  Signaturemoondaddy@newsgroup.nospam > I want to fill the entire background of a page with a gradient. As a test, > I first filled with a solid color like this: [quoted text clipped - 19 lines] > > Thanks. What version of html are you using? in xhtml, the html and body elements is only the size of the content, not the entire window. You have to set the height of them to 100% to make them cover the entire window. SignatureGöran Andersson _____ http://www.guffa.com Hi Moondaddy, Yes, I agree with Guffa that for XHTML page(the default schema of ASP.NET 2.0 page), the body only cover the size of the actual content on the page rather than the entire browser window. However, it is also somewhat specific to the "DXImageTransform.Microsoft.Gradient(" CSS filter component as it is quite specific to IE webbrowser. So far for applying gradient background color for web page, it is recommended that you use a background image which is gradient and this approach is neutral to all browers. How do you think? Sincerely, Steven Cheng Microsoft MSDN Online Support Lead This posting is provided "AS IS" with no warranties, and confers no rights. -------------------- >Date: Sat, 01 Sep 2007 10:15:02 +0200 >> I want to fill the entire background of a page with a gradient. As a test, >> I first filled with a solid color like this: [quoted text clipped - 25 lines] >not the entire window. You have to set the height of them to 100% to >make them cover the entire window. Hi Moondaddy, Any progress on this issue? If there is still anything else we can help, welcome to post here. Sincerely, Steven Cheng Microsoft MSDN Online Support Lead This posting is provided "AS IS" with no warranties, and confers no rights. -------------------- >Hi Moondaddy, > [quoted text clipped - 50 lines] >>not the entire window. You have to set the height of them to 100% to >>make them cover the entire window. Thanks. Lucky for me, this app runs in a corporate intranet and all browsers are ie 6+. Therefore I can use a css filter. So far, I havent been able to fil the entire page. Here's an example of what I'm doing. First is the class in the stylesheet used to apply the gradient to the page. Second is sample html showing how I'm using it. .clsSuggestionPage { FILTER: filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr= 'white' , EndColorStr= '#f3faff' ); height: 100%; font-family: Verdana; } <%@ Page Language="C#" AutoEventWireup="true" Codebehind="zTest2.aspx.cs" Inherits="eVIPNow.zTest2" %> <!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> <link href="app/stylesheets/SuggestionLogStyles.css" rel="stylesheet" type="text/css" /> </head> <body class="clsSuggestionPage"> <form id="form1" runat="server"> <div> <table> <tr> <td> xxx</td> </tr> <tr> <td> xxx</td> </tr> </table> </div> </form> </body> </html> THANKS. > Hi Moondaddy, > [quoted text clipped - 70 lines] >>>not the entire window. You have to set the height of them to 100% to >>>make them cover the entire window. Thanks for your followup Moondaddy, Yes, I've also tested it, I found that height='100%' will not work for the CSS filter. You will need to specify a fixed absolute value for the height so as to make the css filter work. I think this should be a implementation behavior of the gradient css filter. Sincerely, Steven Cheng Microsoft MSDN Online Support Lead This posting is provided "AS IS" with no warranties, and confers no rights. -------------------- >From: "moondaddy" <moondaddy@newsgroup.nospam> >References: <OkQIWdE7HHA.5096@TK2MSFTNGP04.phx.gbl> <ursl4AH7HHA.5316@TK2MSFTNGP04.phx.gbl> <JA3w9kd7HHA.360@TK2MSFTNGHUB02.phx.gbl> <qC8QaR97HHA.5204@TK2MSFTNGHUB02.phx.gbl> >Subject: Re: How to fill background of page with gradient >Date: Fri, 7 Sep 2007 01:25:52 -0500 >Thanks. Lucky for me, this app runs in a corporate intranet and all >browsers are ie 6+. Therefore I can use a css filter. So far, I havent [quoted text clipped - 117 lines] >>>>not the entire window. You have to set the height of them to 100% to >>>>make them cover the entire window. > Thanks. Lucky for me, this app runs in a corporate intranet and all > browsers are ie 6+. Therefore I can use a css filter. So far, I havent [quoted text clipped - 11 lines] > font-family: Verdana; > } Try adding: html { height: 100%; } SignatureGöran Andersson _____ http://www.guffa.com Thanks for Guffa's continual suggestion. Hi Moondaddy, I think the "html {height: 100%;}" approach should be what you want. I've also tested it and it works well. Sincerely, Steven Cheng Microsoft MSDN Online Support Lead This posting is provided "AS IS" with no warranties, and confers no rights. -------------------- >Date: Wed, 12 Sep 2007 18:43:34 +0200 >From: =?ISO-8859-1?Q?G=F6ran_Andersson?= <guffa@guffa.com> >User-Agent: Thunderbird 2.0.0.6 (Windows/20070728) >MIME-Version: 1.0 >Subject: Re: How to fill background of page with gradient >> Thanks. Lucky for me, this app runs in a corporate intranet and all >> browsers are ie 6+. Therefore I can use a css filter. So far, I havent [quoted text clipped - 15 lines] > >html { height: 100%; } Thanks Steven, I don't understand. where are you recommending I add this? "html {height: 100%;}" > Thanks for Guffa's continual suggestion. > [quoted text clipped - 41 lines] >> >>html { height: 100%; } Thanks for the reply Moondaddy, The "html {height: 100%}" is also a css style element which target the "html" element. You can put it in style sheet. Here is a test page in which I put it in the page's <style> template: ============================= <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <style type="text/css" > html { height: 100%; } </style> </head> <body style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='white' , EndColorStr= '#e9f5ff' )" > <form id="form1" runat="server"> <div> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="Button" /></div> </form> </body> </html> ========================= Hope this helps. Sincerely, Steven Cheng Microsoft MSDN Online Support Lead This posting is provided "AS IS" with no warranties, and confers no rights. -------------------- >From: "moondaddy" <moondaddy@newsgroup.nospam> >References: <OkQIWdE7HHA.5096@TK2MSFTNGP04.phx.gbl> <ursl4AH7HHA.5316@TK2MSFTNGP04.phx.gbl> <JA3w9kd7HHA.360 >Subject: Re: How to fill background of page with gradient >Date: Thu, 13 Sep 2007 00:09:24 -0500 >Thanks Steven, > [quoted text clipped - 47 lines] >>> >>>html { height: 100%; } Free MagazinesGet these publications absolutely FREE for up to 12 months. There are no hidden fees and no obligation. Simply choose a title, complete the application form and submit it. Read more ...
|
Reply to this Message
|
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2008 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.