| Groups | Blog | Home |
asp.net : How 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. -- moondaddy@newsgroup.nospam
[quoted text, click to view]
moondaddy wrote: > 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. > 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. -- Göran Andersson _____
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. -------------------- [quoted text, click to view] >Date: Sat, 01 Sep 2007 10:15:02 +0200 [quoted text, click to view] >
>moondaddy wrote: >> 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. >> > >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. > >-- >Göran Andersson >_____ >http://www.guffa.com >
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. -------------------- [quoted text, click to view] >
>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 > > >> >>moondaddy wrote: >>> 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. >>> >> >>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. >> >>-- >>Göran Andersson >>_____ >>http://www.guffa.com >> > >
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. [quoted text, click to view] "Steven Cheng[MSFT]" <stcheng@online.microsoft.com> wrote in message news:qC8QaR97HHA.5204@TK2MSFTNGHUB02.phx.gbl... > 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, >> >>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 >> >> >>> >>>moondaddy wrote: >>>> 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. >>>> >>> >>>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. >>> >>>-- >>>Göran Andersson >>>_____ >>>http://www.guffa.com >>> >> >> >
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. -------------------- [quoted text, click to view] >From: "moondaddy" <moondaddy@newsgroup.nospam> <ursl4AH7HHA.5316@TK2MSFTNGP04.phx.gbl> >References: <OkQIWdE7HHA.5096@TK2MSFTNGP04.phx.gbl> <JA3w9kd7HHA.360@TK2MSFTNGHUB02.phx.gbl> <qC8QaR97HHA.5204@TK2MSFTNGHUB02.phx.gbl> [quoted text, click to view] >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 >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. > > >"Steven Cheng[MSFT]" <stcheng@online.microsoft.com> wrote in message >news:qC8QaR97HHA.5204@TK2MSFTNGHUB02.phx.gbl... >> 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, >>> >>>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 >>> >>> >>>> >>>>moondaddy wrote: >>>>> 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. >>>>> >>>> >>>>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. >>>> >>>>-- >>>>Göran Andersson >>>>_____ >>>>http://www.guffa.com >>>> >>> >>> >> > > >
[quoted text, click to view]
moondaddy wrote: > 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; > } > Try adding: html { height: 100%; } -- Göran Andersson _____
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. -------------------- [quoted text, click to view] >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 > >moondaddy wrote: >> 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; >> } >> > >Try adding: > >html { height: 100%; } > >-- >Göran Andersson >_____ >http://www.guffa.com >
Thanks Steven,
I don't understand. where are you recommending I add this? "html {height: 100%;}" [quoted text, click to view] "Steven Cheng[MSFT]" <stcheng@online.microsoft.com> wrote in message news:uXCXpBb9HHA.428@TK2MSFTNGHUB02.phx.gbl... > 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 > >> >>moondaddy wrote: >>> 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; >>> } >>> >> >>Try adding: >> >>html { height: 100%; } >> >>-- >>Göran Andersson >>_____ >>http://www.guffa.com >> >
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. -------------------- [quoted text, click to view] >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, > >I don't understand. where are you recommending I add this? > > "html {height: 100%;}" > > > >"Steven Cheng[MSFT]" <stcheng@online.microsoft.com> wrote in message >news:uXCXpBb9HHA.428@TK2MSFTNGHUB02.phx.gbl... >> 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 >> >>> >>>moondaddy wrote: >>>> 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; >>>> } >>>> >>> >>>Try adding: >>> >>>html { height: 100%; } >>> >>>-- >>>Göran Andersson >>>_____ >>>http://www.guffa.com >>> >> > > >
Don't see what you're looking for? Try a search.
|
June 2003
July 2003
August 2003
September 2003
October 2003
November 2003
December 2003
January 2004
February 2004
March 2004
April 2004
May 2004
June 2004
July 2004
August 2004
September 2004
October 2004
November 2004
December 2004
January 2005
February 2005
March 2005
April 2005
May 2005
June 2005
July 2005
August 2005
September 2005
October 2005
November 2005
December 2005
January 2006
February 2006
March 2006
April 2006
May 2006
June 2006
July 2006
August 2006
September 2006
October 2006
November 2006
December 2006
February 2007
March 2007
April 2007
May 2007
June 2007
July 2007
August 2007
September 2007
October 2007
November 2007
December 2007
January 2008
February 2008
March 2008
April 2008
May 2008
June 2008
| home · blog · groups | Questions? Comments? Contact the dn |