two tone background in html? – Education Career Blog

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?

,

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 1024×1 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…

,

CSS

<style type="text/css">
    body { background-color: #ccc; }
    div.page { margin: 0 auto; width: 85%; background-color: #ddd; }
</style>

HTML

<div class="page">
    <h1>Your page</h1>
    <p>Coming soon...</p>
</div>

,

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.

Leave a Comment