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

RE: Solid stripe for background?

From: Lindsay Evans <lindsay@redsquare.com.au>
Date: Wed, 17 Jan 2001 17:54:32 +1100
To: <www-style@w3.org>
Message-ID: <NEBBKJCHLKELHFDMNAHNOEJDCJAA.lindsay@redsquare.com.au>

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 01:52:46 GMT

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