W3C home > Mailing lists > Public > www-style@w3.org > January 2001

Solid stripe for background?

From: Ian Turner <vectro@stop.mail-abuse.org>
Date: Tue, 16 Jan 2001 22:19:30 -0800 (PST)
To: www-style@w3.org
Message-ID: <Pine.LNX.4.10.10101162213350.27793-100000@crafter.house>
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 01:20:02 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:07 GMT