The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> 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
pandy
post Apr 1 2012, 06:22 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,195
Joined: 9-August 06
Member No.: 6



Does <!DOCTYPE html> make a difference? How does the page react to another doctype that triggers Standards Mode?


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 1 2012, 09:41 PM
Post #3


WDG Member
********

Group: Root Admin
Posts: 7,998
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



QUOTE(pandy @ Apr 1 2012, 04:22 PM) *
Does <!DOCTYPE html> make a difference? How does the page react to another doctype that triggers Standards Mode?
FWIW, the HTML 5 doctype should trigger standards mode.


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 1 2012, 10:47 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,195
Joined: 9-August 06
Member No.: 6



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?


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 2 2012, 01:50 AM
Post #5


Programming Fanatic
********

Group: Members
Posts: 4,278
Joined: 23-August 06
From: Europe
Member No.: 9



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.


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 2 2012, 08:54 AM
Post #6


.
********

Group: WDG Moderators
Posts: 5,920
Joined: 10-August 06
Member No.: 7



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

CODE
body {height: 100%;}


in quirks mode, but in standards mode you need something like

CODE
html, body {height: 100%;}


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 2 2012, 04:54 PM
Post #7


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,195
Joined: 9-August 06
Member No.: 6



That would explain it. I don't see a gradient in the first picture, but I've never been one for nuances. sleep.gif


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 2 2012, 07:02 PM
Post #8


.
********

Group: WDG Moderators
Posts: 5,920
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 #9


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,195
Joined: 9-August 06
Member No.: 6



Background color doesn't always fill either, but I've forgotten the circumstances when that happens.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 3 2012, 01:41 AM
Post #10


Programming Fanatic
********

Group: Members
Posts: 4,278
Joined: 23-August 06
From: Europe
Member No.: 9



QUOTE
get tiling gradients, each of the same height as the HTML element box.

Not if you add height: 100%; to the CSS.


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 3 2012, 04:36 AM
Post #11


.
********

Group: WDG Moderators
Posts: 5,920
Joined: 10-August 06
Member No.: 7



QUOTE(Frederiek @ Apr 3 2012, 08:41 AM) *

QUOTE
get tiling gradients, each of the same height as the HTML element box.

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".


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 3 2012, 04:45 AM
Post #12


.
********

Group: WDG Moderators
Posts: 5,920
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Apr 3 2012, 02:29 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):

CODE
html {
background-color: pink;
border: solid red;
}

body {background-color: blue;}



--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 3 2012, 09:05 AM
Post #13


.
********

Group: WDG Moderators
Posts: 5,920
Joined: 10-August 06
Member No.: 7



The CSS3 "background-size" property makes a BG image fill the whole viewport:

CODE
html {
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.


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 3 2012, 09:06 AM
Post #14


.
********

Group: WDG Moderators
Posts: 5,920
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Apr 3 2012, 02:29 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


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 3 2012, 01:44 PM
Post #15


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,195
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.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 3 2012, 05:45 PM
Post #16


.
********

Group: WDG Moderators
Posts: 5,920
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Apr 3 2012, 08:44 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.

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.


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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: 24th July 2014 - 07:25 AM