Tutorial :two tone background in html?



Question:

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?


Solution:1

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?


Solution:2

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...


Solution:3

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>  


Solution:4

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.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »