By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,359 Members | 1,495 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,359 IT Pros & Developers. It's quick & easy.

background border on right and left

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
Brian wrote:
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.
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
Jul 20 '05 #2

P: n/a
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
Jul 20 '05 #3

P: n/a
Mary Ellen Curtin wrote:
Brian wrote:
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


Nothing happens. "Operation timed out..." Server problems?
Erm, why would you use an image for borders?


Because they want something wide


body {
border-left: 10px solid #909 ;
border-right: 10px solid #090 ;
}
(and later I suspect they will want textures, etc.).
Textured, you say? I suppose images could be used for that. You can
use a background image, 1 pixel high, and use repeat-vertical to have
it run down the page. But you can only have 1 background image for
any given element. You'll have to patch something together for the
other border.
Also, IE5.5 (at least) puts a body border (as in your example)
outside the scroll bar.


Have you tried putting a div inside the body, and applying the borders
to the div? You'd have to set height: 100%; mind, I haven't tested
that idea.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #4

P: n/a
Mary Ellen Curtin wrote:

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
There is a margin-top to the h1. Is that the problem? If not, please
elaborate.
Mary Ellen
Doctor Science, MA


Would you consider fixing your sig? Put "-- " (note the space) on a
line by itself, then put your sig below it. Proper sig delimiters
make replying easier.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #5

P: n/a
Mary Ellen Curtin wrote:
| 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">
<!-- put all content here -->
</div>
</body>

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

HTH,
SantaKlauss
Jul 20 '05 #6

P: n/a
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
Jul 20 '05 #7

P: n/a
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
Jul 20 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.