By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
448,838 Members | 1,668 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 448,838 IT Pros & Developers. It's quick & easy.

How to fill background of page with gradient

P: n/a
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(Gradien tType=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.

--
mo*******@newsgroup.nospam
Sep 1 '07 #1
Share this Question
Share on Google+
6 Replies


P: n/a
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(Gradien tType=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
Sep 1 '07 #2

P: n/a
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(Gradie ntType=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
Sep 3 '07 #3

P: n/a
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(Gradi entType=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

Sep 5 '07 #4

P: n/a
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(Gradien tType=0,
StartColorStr= 'white' , EndColorStr= '#f3faff' );
height: 100%;
font-family: Verdana;
}
Try adding:

html { height: 100%; }

--
Göran Andersson
_____
http://www.guffa.com
Sep 12 '07 #5

P: n/a
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?= <gu***@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(Gradien tType=0,
>StartColorStr= 'white' , EndColorStr= '#f3faff' );
height: 100%;
font-family: Verdana;
}

Try adding:

html { height: 100%; }

--
Göran Andersson
_____
http://www.guffa.com
Sep 13 '07 #6

P: n/a
Thanks Steven,

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

"html {height: 100%;}"

"Steven Cheng[MSFT]" <st*****@online.microsoft.comwrote in message
news:uX*************@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?= <gu***@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(Gradien tType=0,
>>StartColorStr= 'white' , EndColorStr= '#f3faff' );
height: 100%;
font-family: Verdana;
}

Try adding:

html { height: 100%; }

--
Göran Andersson
_____
http://www.guffa.com

Sep 13 '07 #7

This discussion thread is closed

Replies have been disabled for this discussion.