So I want to make the background of my website two tone. What I mean is have a dark gray in the center, going all the way down, but then have a lighter gray on just the sides. Maybe 80-85% of the pages width. Do would I go about doing this?
So what I want is the middle to be one color, and the two sides to be another color. Is there a way to set the bgcolor and then set it's width to 80% or something like that?
No. You'll need to create an element with the dark gray background separately from the light gray element.
Something like:
<body style="background-color:#ccc;">
<div style="margin:0 auto;background-color:#555;width:85%;">
<!-- rest of the page contents -->
</div>
</body>
Or use a background image on the body, but that's less scalable, and can't be used for percentage width.
You'd be much better off using a background image, mate; assuming you know your target audience's primary monitor size, you could just make, say, a 1024x1 image with the parameters you require. If, however (and this is more likely the case), you are trying to get this to be dynamic, why not just use a div element, like so:
<style type="text/css">
#main
{
width: 84%;
background-color: #666666;
border: 1px solid #cccccc;
border-width: 0 8% 0 8%;
}
</style>
<div id="main">#content#</div>
I take that back... Really?! No percentage widths for borders?
If you're center area is of fixed width, then you can produce an image with that width, one pixel high, and then write the following CSS:
body {
background-color: #ccc;
background-image: url('some-image.jpg');
background-position-x: center;
background-repeat: repeat-y;
}
If not, you'll have to define a <div>. Odds are you'll have to define a <div> to hold your content anyway, if you want your content to be centered on page...
<style type="text/css">
body { background-color: #ccc; }
div.page { margin: 0 auto; width: 85%; background-color: #ddd; }
</style>
<div class="page">
<h1>Your page</h1>
<p>Coming soon...</p>
</div>