The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Gradient Background CSS
carsten chr
post Apr 1 2012, 05:48 PM
Post #1





Group: Members
Posts: 2
Joined: 18-June 11
Member No.: 14,789



Hi !......

This is driving me nuts !..... cool.gif

In my "stylesheet_background.css" file I've put:

body
{background-color: #787878;
background-image:-webkit-gradient(linear, left top, left bottom, from(#CDCDCD), to(#131313));
background-image:-o-linear-gradient(top, #CDCDCD, #131313);
background-image:-moz-linear-gradient(top, #CDCDCD, #131313);
filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#CDCDCD', endColorstr='#131313' gradientType='0')}

In the top of my webpage I've put:

<!DOCTYPE HTML>

The output is as follows:

IPB Image

If I then remove the DOCTYPE, I'm getting this result:

IPB Image

And that's how I wan't it to be (as the last example) !

When I'm scrolling down the page, the gradient background stay fixed (read: don't change).

What do I do to solve this issue - I need the DOCTYPE specified to show other things correctly !

Thanks ! cool.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
Christian J
post Apr 2 2012, 07:02 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



I just barely could make it out, to be sure I had to use my color pick program.

BTW, http://www.w3.org/TR/css3-images/#gradients says:
"A gradient is drawn into a box with the dimensions of the concrete object size, referred to as the gradient box."

But shouldn't a gradient fill the whole canvas, just like the BODY or root (HTML) element's background-color does? When I try the following:

CODE
html {
border: solid lime;
background-image:-webkit-gradient(linear, left top, left bottom, from(#CDCDCD), to(#131313));
background-image:-o-linear-gradient(top, #CDCDCD, #131313);
background-image:-moz-linear-gradient(top, #CDCDCD, #131313);
}

I get tiling gradients, each of the same height as the HTML element box. wacko.gif IE9's version tiles the whole viewport though.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 2 2012, 07:29 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Background color doesn't always fill either, but I've forgotten the circumstances when that happens.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 10:02 AM