RE: Solid stripe for background?

No, because according to the spec, at
http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-height

"<percentage>
Specifies a percentage height. The percentage is calculated with respect
to the height of the generated box's containing block. If the height of
the containing block is not specified explicitly (i.e., it depends on
content height), the value is interpreted like 'auto'."

where the height of the "containing block" is given at
http://www.w3.org/TR/REC-CSS2/visuren.html#containing-block

"The height of the initial containing block may be specified with the
'height' property for the root element. If this property has the value
'auto', the containing block height will grow to accommodate the
document's content."

So you see, specifying a height of 100% for the body dosen't do anything;
Since the containing block is set to auto, it changes the 100% to auto as
well.

Ian Turner

On Wed, 17 Jan 2001, Lindsay Evans wrote:

> 
> is this what you were after?
> 
> BODY div.maintext{
>   background-image: url("gradient.png");
>   background-repeat: repeat-x;
>   background-color: #dfccb0;
>   position: relative;
>   left: 2in;
>   width: 4in;
>   height: 100%;
> }
> 
> 
> 
> btw. I'm pretty sure these sort of questions should be sent to
> comp.infosystems.www.authoring.stylesheets
> 
> 
> 
> --
>  Lindsay Evans.
>  Production Artist/Coder,
>  Red Square Productions.
> 
>  vox: 9519.4599
>  fax: 9519.4699
>  web: www.redsquare.com.au
> 
> -----Original Message-----
> From: www-style-request@w3.org [mailto:www-style-request@w3.org]On
> Behalf Of Ian Turner
> Sent: Wednesday, January 17, 2001 5:20 PM
> To: www-style@w3.org
> Subject: Solid stripe for background?
> 
> 
> Actually, what I'm trying to do is get a gradient background that falls
> into a solid color. You can get an idea of what I'm looking for by going
> to http://www.tranquilspaces.com. But I want the beige stripe to fall into
> a solid color and continue to the bottom of the page.
> 
> This isn't much of a problem when the page is longer than the browser
> window is tall. We can use something like this:
> 
> BODY div.maintext{
>   background-image: url("gradient.png");
>   background-repeat: repeat-x;
>   background-color: #dfccb0;
>   position: relative;
>   left: 2in;
>   width: 4in;
> }
> 
> where the main text is enclosed in a DIV thusly:
> 
> <DIV CLASS="maintext">
> Text goes here.
> </DIV>
> 
> The problem is that if the text inside the DIV is less than one browser
> page long, the background does not extend to the bottom of the browser
> page, as desired. This is because the height of the BODY element is
> defined to be the required height to fit all of the elements.
> 
> I can make the main text DIV be a fixed length like this:
> 
> BODY div.maintext{
>   background-image: url("gradient.png");
>   background-repeat: repeat-x;
>   background-color: #dfccb0;
>   position: relative;
>   left: 2in;
>   width: 4in;
>   height: 100ex;
> }
> 
> But that dosen't really solve the problem either, because it introduces a
> scroll bar which would lead the user to believe there is more content
> below, what that is not the case.
> 
> Any ideas?
> 
> Thanks,
> 
> Ian Turner
>

Received on Wednesday, 17 January 2001 11:15:01 UTC