473,774 Members | 2,176 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

background border on right and left

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
7 14570
Brian wrote:
body {
border-left: thin solid #909 ;
border-right: thin solid #090 ;
}
I was unclear. By "border" I meant the sort of border+backgrou nd 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
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
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+backgrou nd 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
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
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("rightborde r.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
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("rightborde r.gif") top right repeat-y;
margin: 0 100px
}

HTH,
SantaKlauss
Jul 20 '05 #7
Ooops, sorry: have to use padding instead of margin.

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

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

*<|:-)
SantaKlauss
Jul 20 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
2295
by: CMAR | last post by:
I have a design of a frameless page on my practice website: http://home.ne.rr.com/thespar/designerN.htm The idea is to have a #left navigation bar which is absolutely positioned and which contains a series of vertical placed unordered lists of links. To the right of the #left navigation bar is the #content section. I want the background in the #left section to extend to the bottom of the browser window.
11
3200
by: Konrad Den Ende | last post by:
I have a function returning a string but the problem is that the color of it is blue which suits me well for some pages but not for others. Is it possible to "feel" what the color of the background in the current document is and set the color of the output accordingly? The background will be an image, in most cases. -- Kindly Konrad
0
1542
by: Skeeve | last post by:
Hi there, I'm trying to create a containing box (relative position), and within it, I'm trying to line that box with four (top, right, left, bottom) thin boxes that contain a repeated background image, thus creating a kind of fancy border. What would be the best practice to do that? I thought that if the containor box was relative and the contained boxes were absolute, that would work because the absolute boxes would be measured...
2
4552
by: Skeeve | last post by:
Hi there, I'm trying to create a containing box (relative position), and within it, I'm trying to line that box with four (top, right, left, bottom) thin boxes that contain a repeated background image, thus creating a kind of fancy border. What would be the best practice to do that? I thought that if the containor box was relative and the contained boxes were absolute, that would work because the absolute boxes would be measured...
14
7398
by: arteccentrix | last post by:
Please bear with me as I am new to both Firefox and CSS. I have browsed through a number of groups looking for similar problems to my own but can't find a definitive answer. If anyone here can help me out I would appreciate your shared expertise so much. My background image is displaying fine in IE, and, sometimes in Firefox until I hit the reload button. It seems as if the browser is unable to locate the image and throws up a graphic...
4
2824
by: Philipp Kraus | last post by:
Hi, I have one problem with my position of my background image. I have created one div-tag that has a background image, which should be fixed during scrolling. On the left side of the div is my menu-div, so the content div is shown round 25% from the left browser side. In this content div I would like to position a image on the left or right side. I need a background-attachment: static, because the layout position is the div, not the...
2
2619
by: mdejac | last post by:
I was wondering why the background color is not showing up in Mozilla. When I view the page there is a light blue background, when it should be black. Thank you for any help. http://www.myspace.com/mdejac <style type="text/css"> body { font-family: helvetica, arial, sans-serif; font-size: 62.5%; background-color: black; } table, td {
16
4937
by: stevedude | last post by:
CSS newbie again. I have a problem trying to get coffee mug images within anchor tags to center with my link text for a vertical list menu. If I use the horizontal/vertical properties of "background" or "background-image", the positioning only works with specifying pixels. If I specify the vertical position in pixels, the image gets cut-off at the bottom. I don't know what to do and would appreciate anyone's help. Specifically the code...
10
5758
by: VividWeb | last post by:
Hi. I am relatively new to CSS and HTML but have a basic understanding of most things. One of my backgrounds is not positioning correctly in IE 7 or AOL. The background behind the content (small chocolate area) is positioning slightly down the page instead of at the top. I have used the same techniques in the navigation and it positions fine. Its fine in Fire Fox Opera & Safari. I have run my HTML & CSS through W3c and all is clean. ...
0
2706
by: ton | last post by:
Hi, I have an Image which is dark grey/black, at the top a white line, at the left site a white line as well. At 192 px from the left of the screen I position a DIV with this image as the background image. In the code I've added a multi line textbox (in my real world it is a treeview). It is placed that I would have to scroll to see the entire textbox. What happens is that the image will repeat itself, this is what you expect. Because...
0
9621
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9454
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10106
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
9914
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8939
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7463
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6717
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
1
4012
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3611
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.