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, 04:45 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. 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): CODE html { background-color: pink; border: solid red; } body {background-color: blue;} |
Lo-Fi Version | Time is now: 23rd April 2024 - 10:47 PM |