Gradient Background CSS |
Gradient Background CSS |
carsten chr |
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 !..... 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 ! |
Christian J |
Apr 2 2012, 07:02 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 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. IE9's version tiles the whole viewport though. |
pandy |
Apr 2 2012, 07:29 PM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Background color doesn't always fill either, but I've forgotten the circumstances when that happens.
|
Christian J |
Apr 3 2012, 09:06 AM
Post
#4
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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 |
pandy |
Apr 3 2012, 01:44 PM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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.
|
Christian J |
Apr 3 2012, 05:45 PM
Post
#6
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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. QUOTE 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. 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. |
Lo-Fi Version | Time is now: 25th April 2024 - 06:52 AM |