background border on right and left

#1

The client wants the page to have both a left border (purple) and a right
border (green).
Is there any way to stretch a background image to fit the viewport? Or
should I divide
the background into columns, each a different color?

Mary Ellen
Doctor Science, MA

#2

Brian wrote:

Quote:

body {
border-left: thin solid #909 ;
border-right: thin solid #090 ;
}

I was unclear. By "border" I meant the sort of border+background you see
here:
http://www.pambytes.com/borders/paper/index1.html
(example chosen by random googling). The client wants quite a wide colored
band
running down each side of the viewport.

Quote:

Erm, why would you use an image for borders?

Because they want something wide (and later I suspect they will want
textures, etc.). Also,
IE5.5 (at least) puts a body border (as in your example) outside the scroll
bar.

While googling I found this example:
http://www.bigbaer.com/css_tutorials...css.template.h
tm

and am looking at the code in the hopes I can alter it to be useful.

Mary Ellen
Doctor Science, MA

#3

Replying to myself, I've put *something* together here:

http://www.alternateuniverses.com/test/anetry.html

Do I need to use a box hack on my "main" division to get it to go up to the
top of the screen
in IE6.0? It looks just right in IE5.5.

Mary Ellen
Doctor Science, MA

#4

Mary Ellen Curtin wrote:

Quote:

The client wants the page to have both a left border (purple) and a right
border (green).
Is there any way to stretch a background image to fit the viewport? Or
should I divide
the background into columns, each a different color?

Hi Mary, an easy solution could be this if you have to use
graphics borders. CSS part:

<style type="text/css">

html, html>body{
height: 100%;
/*just added for testing purpose even with blank page in
Opera and Mozilla, remove it when you've filled up the page*/
}

body{
background: url("leftborder.gif") top left repeat-y
}

div#main{
background: url("rightborder.gif") top right repeat-y;
margin: 0 100px;
}

</style>

and in the html:

<body>
<div id="main">

</div>
</body>

Note the right and left margin should have at least same width
of the background images.

HTH,
SantaKlauss

#5

Hi Mary,
just a little thing to add: if you want the body background-color to
be set, and I suppose you would, just have to add the color in the body
background shorthand and leave the main content with transparent
background, like this:

body{
background: #69C url("leftborder.gif") top left repeat-y
}

div#main{
background: transparent url("rightborder.gif") top right repeat-y;
margin: 0 100px
}

HTH,
SantaKlauss

#6

Ooops, sorry: have to use padding instead of margin.

body{
background: #69C url("leftborder.gif") top left repeat-y
}

div#main{
background: transparent url("rightborder.gif") top right repeat-y;
padding: 0 100px
}

*<|:-)
SantaKlauss

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

background border on right and left

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

background border on right and left - 09-05-2003 , 05:38 PM

Re: background border on right and left - 09-05-2003 , 11:37 PM

Re: background border on right and left - 09-06-2003 , 11:58 AM

Re: background border on right and left - 09-07-2003 , 05:40 AM

Re: background border on right and left - 09-07-2003 , 11:01 AM

Re: background border on right and left - 09-08-2003 , 12:32 AM