How to fill background of page with gradient

moondaddy · Sep 1, 2007

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

XImageTransform.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.

=?ISO-8859-1?Q?G=F6ran_Andersson?= · Sep 1, 2007

moondaddy said:
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:
progidXImageTransform.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.

Steven Cheng[MSFT] · Sep 3, 2007

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.

--------------------

Steven Cheng[MSFT] · Sep 5, 2007

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.

--------------------

moondaddy · Sep 7, 2007

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

XImageTransform.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] · Sep 12, 2007

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" <[email protected]>
References: <[email protected]>

<[email protected]>

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

XImageTransform.Microsoft.Gradient(GradientType=0,

=?ISO-8859-1?Q?G=F6ran_Andersson?= · Sep 12, 2007

moondaddy said:
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: progidXImageTransform.Microsoft.Gradient(GradientType=0,
StartColorStr= 'white' , EndColorStr= '#f3faff' );
height: 100%;
font-family: Verdana;
}

Try adding:

html { height: 100%; }

Steven Cheng[MSFT] · Sep 13, 2007

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.

--------------------

moondaddy · Sep 13, 2007

Thanks Steven,

I don't understand. where are you recommending I add this?

"html {height: 100%;}"

Steven Cheng[MSFT] · Sep 14, 2007

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

rogid

XImageTransform.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" <[email protected]>
References: <[email protected]>

Subject: Re: How to fill background of page with gradient
Date: Thu, 13 Sep 2007 00:09:24 -0500

How to position the tooltip comment on these buttons?	9	Nov 4, 2023
Background image not showing up on html page	3	Sep 23, 2023
Help with my responsive home page	2	Dec 14, 2022
Javascript fill function data from multidimensonal array	0	Dec 12, 2022
Help needed with thank you message	5	Sep 11, 2021
How to properly insert a landing page within same container beneath an image element?	0	Oct 7, 2024
I want to have a button in a web page with action for open new phone contact page and fill it with some date	1	Aug 31, 2023
New CSS features for smooth entry and exit animations	0	May 28, 2024

How to fill background of page with gradient

moondaddy

=?ISO-8859-1?Q?G=F6ran_Andersson?=

Steven Cheng[MSFT]

Steven Cheng[MSFT]

moondaddy

Steven Cheng[MSFT]

=?ISO-8859-1?Q?G=F6ran_Andersson?=

Steven Cheng[MSFT]

moondaddy

Steven Cheng[MSFT]

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads