Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Cascading Style Sheets _ Gradient Background CSS
Posted by: carsten chr Apr 1 2012, 05:48 PM
Hi !......
This is driving me nuts !..... 
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:
If I then remove the DOCTYPE, I'm getting this result:
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 !
Posted by: pandy Apr 1 2012, 06:22 PM
Does <!DOCTYPE html> make a difference? How does the page react to another doctype that triggers Standards Mode?
Posted by: Darin McGrew Apr 1 2012, 09:41 PM
Posted by: pandy Apr 1 2012, 10:47 PM
I want to make sure it happens with other standards mode doctypes too. Sounds odd it only works in quirks. Haven't tried gradients myself, but why wouldn't they work in SM?
Posted by: Frederiek Apr 2 2012, 01:50 AM
Can you post the url of the page?
BTW, you lack some gradient declarations, particularly the one for W3C standards.
Create your gradient at http://www.colorzilla.com/gradient-editor/ and see the generated CSS.
Posted by: Christian J Apr 2 2012, 08:54 AM
Both screenshots seem to have gradients, just that the first one is smaller. The latter could happen if the BODY height is much larger, which in turn might be affected by the Doctype.
For example, to make a short BODY expand you might use
in quirks mode, but in standards mode you need something like
Posted by: pandy Apr 2 2012, 04:54 PM
That would explain it. I don't see a gradient in the first picture, but I've never been one for nuances. 
Posted by: Christian J Apr 2 2012, 07:02 PM
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:
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.
IE9's version tiles the whole viewport though.
Posted by: pandy Apr 2 2012, 07:29 PM
Background color doesn't always fill either, but I've forgotten the circumstances when that happens.
Posted by: Frederiek Apr 3 2012, 01:41 AM
Not if you add height: 100%; to the CSS.
Posted by: Christian J Apr 3 2012, 04:36 AM
Not if you add height: 100%; to the CSS.
Yes, that's what my first replay was about. But it feels clumsy having to do that, just like you don't have to do it for BODY background-color.
BTW the tiling can be removed with CSS "background-repeat".
Posted by: Christian J Apr 3 2012, 04:45 AM
Background color doesn't always fill either, but I've forgotten the circumstances when that happens.
It should fill if you specify it for the HTML/root element, or for BODY alone. If you specify different background-colors for HTML and BODY, the former will fill the viewport while the latter will only fill the size of BODY (which can be smaller than the viewport).
In this example the viewport BG should be pink, but the actual HTML/root element's area is much smaller, as seen with the red border (which appears around the blue BODY area, not around the viewport edges):
background-color: pink;
border: solid red;
}
body {background-color: blue;}
Posted by: Christian J Apr 3 2012, 09:05 AM
The CSS3 "background-size" property makes a BG image fill the whole viewport:
background-image: url(dog.jpg);
background-size: 100%;
border: solid red;
}
but apparently that only applies to BG image files, not BG gradient images.
Of course the gradient properties are still experimental, it seems none of my browsers support the official W3C syntax yet.
Posted by: Christian J Apr 3 2012, 09:06 AM
Background color doesn't always fill either, but I've forgotten the circumstances when that happens.
Here's the spec:
http://www.w3.org/TR/CSS21/colors.html#background
http://www.w3.org/TR/css3-background/#special-backgrounds
Posted by: pandy Apr 3 2012, 01:44 PM
Yes, but I say that doesn't always happen with BODY. It could be some versions of gecko that did it differently, they changed things around a lot for a while. Anyway I distinctly remember telling people to use the background with HTML instead and that it only happened under certain circumstances.
Posted by: Christian J Apr 3 2012, 05:45 PM
Yes, but I say that doesn't always happen with BODY.
I thought you meant the conditions according to W3C. I wrote about those previously, just wanted to add the W3C links too.
Yes in older browsers (Gecko too?) I recall BODY was the "highest" element you could style, and its background/margin/padding/border filled the viewport. Maybe Gecko acted in odd ways during the transition.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)