How to fill background of page with gradient

M

moondaddy

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

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

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:
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.
 
S

Steven Cheng[MSFT]

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.


--------------------
 
S

Steven Cheng[MSFT]

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.


--------------------
 
M

moondaddy

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

Steven Cheng[MSFT]

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:DXImageTransform.Microsoft.Gradient(GradientType=0,
 
?

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

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

Try adding:

html { height: 100%; }
 
S

Steven Cheng[MSFT]

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.

--------------------
 
M

moondaddy

Thanks Steven,

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

"html {height: 100%;}"
 
S

Steven Cheng[MSFT]

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" <[email protected]>
References: <[email protected]>
Subject: Re: How to fill background of page with gradient
Date: Thu, 13 Sep 2007 00:09:24 -0500
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top