apply background color to left and right only; exclude middle

border css
full width background color css
css selectors
box-shadow
color picker
css div full width of screen
full width div inside container
css background color

I'm trying to apply one background color to the left and the right of my main site content, while keeping the middle header/body/footer sections of the website a different color. In other words, I want the left and right sections of the page to be blue (for example) while the middle (which displays all the content) is white.

I've tried a few things--resulting in a mostly white main section--but if there's no content taking up the rest of the page, the surrounding color fills in the space rather than the white. You can see an example of this issue in the "Welcome!" section.

section, aside, h1 {
  margin: 0;
  padding: 0;
}
section, aside {
  margin-top: 1.5em;
  margin-bottom: 1em;
}
/*Body styles*/
body {
  height: 100%;
  width: 1100px; 
  margin: 0 auto; 
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  background-color: #eff0f6;
}
/*Header styles*/
header {
  border-bottom: 1px solid gray;
  background-color: #ffffff;
}
header #logo {
  height: 120px;
  width: 120px;
  float: left;
  padding-top: 5px; 
  padding-bottom: 5px;
  padding-left: 5px;
}
header h1 {
  color: black;
  margin-left: 100px;
  padding-top: 0.5em;
  padding-left: 1em;
}

header h2 {
  color: black;
  margin-left: 100px;
  margin-bottom: .2em;
  padding-left: 1.5em;
}


/*Navigation styles*/

#nav_menu {
  list-style: none;
  font-weight: bold;
  margin-bottom: 0px;
  border-bottom: 1px solid gray;
  width: 100%;
  text-align: center;
  background-color: #ffffff;
  height:40px;
}

#nav_menu ul {
  list-style-type: none;
  margin: 0px;
  padding: 0;
  width: 100%;
  float: left;
}

#nav_menu li {
  margin: 0px;
}

#nav_menu li a {
  padding-top: 10px;
  padding-right: 30px;
  padding-bottom: 10px;
  padding-left: 30px;
  text-decoration: none;
  font-weight: bold;
  color: #000000;
  background-color: #ffffff;
  float: left;
}

#nav_menu li a:hover {
  color: #FFFFFF;
  background-color: #cf2033;
}

.social {
  height: 35px;
  weight; 35px;
  padding-top: 2px;
  padding-right: 2px;
  padding-left: 2px;
}


/*Section styles*/

section {
  width: 764px;
  padding-top: 40px;
  padding-left: 10px;
  padding-right: 10px;
  float: left;
  background-color: #ffffff;
  margin-top: 0px;
}

/*Aside styles*/

aside {
  width: 275px;
  float: right;
  padding-top: 40px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-left: 1px solid gray;
  background-color: #ffffff;
  margin-top: 0px;
  margin-bottom: 0px;
}

aside h1 {
  font-size: 125%;
}

aside #johnjenkinsphoto1 {
  height: 200px;
  width: 275px;
  padding-right: 2px;
  padding-bottom: 20px;
  float: left;
}

aside p {
  margin-bottom: .5em;
}

/*Footer styles*/

footer {
  clear: both;
  padding: 5px;
  margin-top: 1em;
  border-top: 1px solid gray;
  background-color: #ffffff;
}
<html>

<head>
	<title>Coach John R. Jenkins | Consultant, Personal Trainer, Speaker</title>
	<link rel="stylesheet" href="main.css">
</head>

<body>
  <header>
      <img src="fitness icon1.png" alt="Title of Website" id="logo" width="80">
      <hgroup>
          <h1>Coach John R. Jenkins</h1>
          <h2>Your Virtual Guide to Wellness, Performance, and Success</h2>
      </hgroup>
      <br>
  </header>
    <nav id="nav_menu">
    <ul>
    <li><a href="starthere.html">START HERE</a></li>
    <li><a href="consulting.html">CONSULTING</a></li>
    <li><a href="training.html">TRAINING</a></li>
    <li><a href="speaking.html">SPEAKING</a></li>
    <li><a href="contact.html">CONTACT</a></li>
    <a href="http://www.pinterest.com" target="_blank"><img src="pinterest.png" alt="Coach John Jenkins on Pinterest" class="social" align="right"></a>     
    <a href="http://www.instagram.com" target="_blank"><img src="instagram.png" alt="Coach John Jenkins on Instagram" class="social" align="right"></a>    
    <a href="http://www.flickr.com" target="_blank"><img src="flickr.png" alt="Coach John Jenkins on Flickr" class="social" align="right"></a>    
    <a href="http://www.facebook.com" target="_blank"><img src="facebook.png" alt="Coach John Jenkins on Facebook" class="social" align="right"></a>
    </ul>
  </nav>
  <aside>
      <h1 align="center">About Coach Jenkins</h1><br>
      <img src="coachjohnjenkinsphoto1.png" alt="Photo of Coach John Jenkins" id="johnjenkinsphoto1"><br><br>
      <p>A brief collection of biographical information for Coach Jenkins may go here. <br><br>
      	Unfortunately, Coach Jenkins and I are still planning and revising website content. Thus, I am inserting this information as a placeholder for that information once we have finalized everything.
      </p>
  </aside>
  <section>
      <h1>Welcome!</h1>
      <p>In this section, I intend to provide summary information pertaining to the purpose of this website. Such information will first be quickly broken down as follows:
      	<ul>
    	<li>First piece of summary information goes here.</li>
    	<li>Second piece of summary information goes here.</li>
    	<li>Third piece of summary information goes here.</li>
    	</ul>
    	Unfortunately, Coach Jenkins and I are still planning and revising website content. Thus, I am inserting this information as a placeholder for that information once we have finalized everything.
    	</p>
  </section>
  <footer>&copy; Copyright 2016 John R. Jenkins</footer>
</body>
</html>

You have to keep the body as width:100% and add another div to control the width to 1100px by

body {
  height: 100%;
  width: 100%;
  margin: 0;
  background-color: #eff0f6;
}
body > div {
  height: 100%;
  width: 1100px;
  margin: 0 auto;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  background-color: white;
}

section,
aside,
h1 {
  margin: 0;
  padding: 0;
}
section,
aside {
  margin-top: 1.5em;
  margin-bottom: 1em;
}
/*Body styles*/

body {
  height: 100%;
  width: 100%;
  margin: 0;
  background-color: #eff0f6;
}
body > div {
  height: 100%;
  width: 1100px;
  margin: 0 auto;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  background-color: white;
}
/*Header styles*/

header {
  border-bottom: 1px solid gray;
  background-color: #ffffff;
}
header #logo {
  height: 120px;
  width: 120px;
  float: left;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
}
header h1 {
  color: black;
  margin-left: 100px;
  padding-top: 0.5em;
  padding-left: 1em;
}
header h2 {
  color: black;
  margin-left: 100px;
  margin-bottom: .2em;
  padding-left: 1.5em;
}
/*Navigation styles*/

#nav_menu {
  list-style: none;
  font-weight: bold;
  margin-bottom: 0px;
  border-bottom: 1px solid gray;
  width: 100%;
  text-align: center;
  background-color: #ffffff;
  height: 40px;
}
#nav_menu ul {
  list-style-type: none;
  margin: 0px;
  padding: 0;
  width: 100%;
  float: left;
}
#nav_menu li {
  margin: 0px;
}
#nav_menu li a {
  padding-top: 10px;
  padding-right: 30px;
  padding-bottom: 10px;
  padding-left: 30px;
  text-decoration: none;
  font-weight: bold;
  color: #000000;
  background-color: #ffffff;
  float: left;
}
#nav_menu li a:hover {
  color: #FFFFFF;
  background-color: #cf2033;
}
.social {
  height: 35px;
  weight;
  35px;
  padding-top: 2px;
  padding-right: 2px;
  padding-left: 2px;
}
/*Section styles*/

section {
  width: 764px;
  padding-top: 40px;
  padding-left: 10px;
  padding-right: 10px;
  float: left;
  background-color: #ffffff;
  margin-top: 0px;
}
/*Aside styles*/

aside {
  width: 275px;
  float: right;
  padding-top: 40px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-left: 1px solid gray;
  background-color: #ffffff;
  margin-top: 0px;
  margin-bottom: 0px;
}
aside h1 {
  font-size: 125%;
}
aside #johnjenkinsphoto1 {
  height: 200px;
  width: 275px;
  padding-right: 2px;
  padding-bottom: 20px;
  float: left;
}
aside p {
  margin-bottom: .5em;
}
/*Footer styles*/

footer {
  clear: both;
  padding: 5px;
  margin-top: 1em;
  border-top: 1px solid gray;
  background-color: #ffffff;
}
<html>

<head>
  <title>Coach John R. Jenkins | Consultant, Personal Trainer, Speaker</title>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <div>
    <header>
      <img src="fitness icon1.png" alt="Title of Website" id="logo" width="80">
      <hgroup>
        <h1>Coach John R. Jenkins</h1>
        <h2>Your Virtual Guide to Wellness, Performance, and Success</h2>
      </hgroup>
      <br>
    </header>
    <nav id="nav_menu">
      <ul>
        <li><a href="starthere.html">START HERE</a>
        </li>
        <li><a href="consulting.html">CONSULTING</a>
        </li>
        <li><a href="training.html">TRAINING</a>
        </li>
        <li><a href="speaking.html">SPEAKING</a>
        </li>
        <li><a href="contact.html">CONTACT</a>
        </li>
        <a href="http://www.pinterest.com" target="_blank">
          <img src="pinterest.png" alt="Coach John Jenkins on Pinterest" class="social" align="right">
        </a>
        <a href="http://www.instagram.com" target="_blank">
          <img src="instagram.png" alt="Coach John Jenkins on Instagram" class="social" align="right">
        </a>
        <a href="http://www.flickr.com" target="_blank">
          <img src="flickr.png" alt="Coach John Jenkins on Flickr" class="social" align="right">
        </a>
        <a href="http://www.facebook.com" target="_blank">
          <img src="facebook.png" alt="Coach John Jenkins on Facebook" class="social" align="right">
        </a>
      </ul>
    </nav>
    <aside>
      <h1 align="center">About Coach Jenkins</h1>
      <br>
      <img src="coachjohnjenkinsphoto1.png" alt="Photo of Coach John Jenkins" id="johnjenkinsphoto1">
      <br>
      <br>
      <p>A brief collection of biographical information for Coach Jenkins may go here.
        <br>
        <br>Unfortunately, Coach Jenkins and I are still planning and revising website content. Thus, I am inserting this information as a placeholder for that information once we have finalized everything.
      </p>
    </aside>
    <section>
      <h1>Welcome!</h1>
      <p>In this section, I intend to provide summary information pertaining to the purpose of this website. Such information will first be quickly broken down as follows:
        <ul>
          <li>First piece of summary information goes here.</li>
          <li>Second piece of summary information goes here.</li>
          <li>Third piece of summary information goes here.</li>
        </ul>
        Unfortunately, Coach Jenkins and I are still planning and revising website content. Thus, I am inserting this information as a placeholder for that information once we have finalized everything.
      </p>
    </section>
    <footer>&copy; Copyright 2016 John R. Jenkins</footer>
  </div>
</body>

</html>

Full Browser Width Bars, This works great if you're using a single background color for the bar. One way is to use left and right borders. You need to be a little careful with negative z- index , since it tends to work only in fairly simple situations without many nested elements with Does Mobile Safari ignore the overflow-x: hidden for anyone else? You can do this with both the shorthand background property and the individual properties thereof except for background-color. That is, the following background properties can be specified as a list, one per background: background , background-attachment , background-clip , background-image , background-origin , background-position , background

Assuming i got your question correct:

You can go with percentage 90% for body and margin auto and add background to html tag like this.

Also changed section width to auto to prevent overflowing.

html {
  background-color: blue;
}
section,
aside,
h1 {
  margin: 0;
  padding: 0;
}
section,
aside {
  margin-top: 1.5em;
  margin-bottom: 1em;
}
/*Body styles*/

body {
  height: 100%;
  width: 90%;
  margin: 0 auto;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  background-color: #eff0f6;
}
/*Header styles*/

header {
  border-bottom: 1px solid gray;
  background-color: #ffffff;
}
header #logo {
  height: 120px;
  width: 120px;
  float: left;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
}
header h1 {
  color: black;
  margin-left: 100px;
  padding-top: 0.5em;
  padding-left: 1em;
}
header h2 {
  color: black;
  margin-left: 100px;
  margin-bottom: .2em;
  padding-left: 1.5em;
}
/*Navigation styles*/

#nav_menu {
  list-style: none;
  font-weight: bold;
  margin-bottom: 0px;
  border-bottom: 1px solid gray;
  width: 100%;
  text-align: center;
  background-color: #ffffff;
  height: 40px;
}
#nav_menu ul {
  list-style-type: none;
  margin: 0px;
  padding: 0;
  width: 100%;
  float: left;
}
#nav_menu li {
  margin: 0px;
}
#nav_menu li a {
  padding-top: 10px;
  padding-right: 30px;
  padding-bottom: 10px;
  padding-left: 30px;
  text-decoration: none;
  font-weight: bold;
  color: #000000;
  background-color: #ffffff;
  float: left;
}
#nav_menu li a:hover {
  color: #FFFFFF;
  background-color: #cf2033;
}
.social {
  height: 35px;
  weight;
  35px;
  padding-top: 2px;
  padding-right: 2px;
  padding-left: 2px;
}
/*Section styles*/

section {
  width: auto;
  padding-top: 40px;
  padding-left: 10px;
  padding-right: 10px;
  float: left;
  background-color: #ffffff;
  margin-top: 0px;
}
/*Aside styles*/

aside {
  width: 275px;
  float: right;
  padding-top: 40px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-left: 1px solid gray;
  background-color: #ffffff;
  margin-top: 0px;
  margin-bottom: 0px;
}
aside h1 {
  font-size: 125%;
}
aside #johnjenkinsphoto1 {
  height: 200px;
  width: 275px;
  padding-right: 2px;
  padding-bottom: 20px;
  float: left;
}
aside p {
  margin-bottom: .5em;
}
/*Footer styles*/

footer {
  clear: both;
  padding: 5px;
  margin-top: 1em;
  border-top: 1px solid gray;
  background-color: #ffffff;
}
<html>

<head>
  <title>Coach John R. Jenkins | Consultant, Personal Trainer, Speaker</title>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <header>
    <img src="fitness icon1.png" alt="Title of Website" id="logo" width="80">
    <hgroup>
      <h1>Coach John R. Jenkins</h1>
      <h2>Your Virtual Guide to Wellness, Performance, and Success</h2>
    </hgroup>
    <br>
  </header>
  <nav id="nav_menu">
    <ul>
      <li><a href="starthere.html">START HERE</a>
      </li>
      <li><a href="consulting.html">CONSULTING</a>
      </li>
      <li><a href="training.html">TRAINING</a>
      </li>
      <li><a href="speaking.html">SPEAKING</a>
      </li>
      <li><a href="contact.html">CONTACT</a>
      </li>
      <a href="http://www.pinterest.com" target="_blank">
        <img src="pinterest.png" alt="Coach John Jenkins on Pinterest" class="social" align="right">
      </a>
      <a href="http://www.instagram.com" target="_blank">
        <img src="instagram.png" alt="Coach John Jenkins on Instagram" class="social" align="right">
      </a>
      <a href="http://www.flickr.com" target="_blank">
        <img src="flickr.png" alt="Coach John Jenkins on Flickr" class="social" align="right">
      </a>
      <a href="http://www.facebook.com" target="_blank">
        <img src="facebook.png" alt="Coach John Jenkins on Facebook" class="social" align="right">
      </a>
    </ul>
  </nav>
  <aside>
    <h1 align="center">About Coach Jenkins</h1>
    <br>
    <img src="coachjohnjenkinsphoto1.png" alt="Photo of Coach John Jenkins" id="johnjenkinsphoto1">
    <br>
    <br>
    <p>A brief collection of biographical information for Coach Jenkins may go here.
      <br>
      <br>Unfortunately, Coach Jenkins and I are still planning and revising website content. Thus, I am inserting this information as a placeholder for that information once we have finalized everything.
    </p>
  </aside>
  <section>
    <h1>Welcome!</h1>
    <p>In this section, I intend to provide summary information pertaining to the purpose of this website. Such information will first be quickly broken down as follows:
      <ul>
        <li>First piece of summary information goes here.</li>
        <li>Second piece of summary information goes here.</li>
        <li>Third piece of summary information goes here.</li>
      </ul>
      Unfortunately, Coach Jenkins and I are still planning and revising website content. Thus, I am inserting this information as a placeholder for that information once we have finalized everything.
    </p>
  </section>
  <footer>&copy; Copyright 2016 John R. Jenkins</footer>
</body>

</html>

The "Inside" Problem, That takes the background-color and pads the left and right sides. The inside What if you only can use a single element? These type of� color: Specifies the color of the left border. Look at CSS Color Values for a complete list of possible color values. Default color is the color of the element: Play it » transparent: Specifies that the border color should be transparent: Play it » initial: Sets this property to its default value. Read about initial: Play it » inherit

I am not sure if all browser support it, so it might be a good idea to add a simple background color just in case, but I think you are looking for that:

body {
  background-color: white;
  background-image: linear-gradient(to right, red, white, white, red);
}

Applying color to HTML elements using CSS, This differs from the inline start and end, which are the left and right edges ( corresponding to where CSS isn't the only web technology that supports color. Note that when you omit the hue's unit, it's assumed to be in degrees ( deg ). The box's background color is set by changing the value of the CSS� The linear-gradient() function sets a linear gradient as the background image. To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect. Example of Linear Gradient:

The CSS layout model: borders, boxes, margins and padding , A block element of the class narrowWaisted will center itself in the middle of the available canvas. Or the right margin of an applicable element can be set to some relatively small value, while the left margin is assigned an auto value. style, and color properties that apply to that border; the only limitation is that you must� How to Set Background Color with HTML and CSS. First thing you should know is that there are different types of HTML colors, such as Hex color codes, HTML color names, RGB and RGBa values, HSL colors, etc.

Is there any way to make a background color stretch out to full width , #Bio { background-color: #e5e5e5; margin-left: -600px; margin-right: -600px; } Our answers are on-demand, video recorded, and only cost between $5 to Lastly, in order to remove the scroll bar, I added the overflow CSS -- I had to add " x"� To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency). The following example shows a linear gradient that starts from the left.

CSS background-clip, While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2020 by Refsnes Data. All Rights Reserved� For example, if the box's text is being rendered right-to-left, then the border-inline-start-color is applied to the right side of the border. Other ways to use color CSS isn't the only web technology that supports color.

Comments
  • Wrap all of your page content inside one div, add a white background to that, and remove the white background on the individual elements.
  • Updated JSFiddle to show you this. Pay attention to the styles of .wrapper: jsfiddle.net/oLdo5m7e/2
  • your question is not clear and on your fiddle can't find out any background:blue property ,can you give an image/demonstration?
  • Thank you! That did the trick. My previous attempts to use div (not captured in the code I uploaded here) weren't getting me the results I wanted, but your code helped me realize where I went wrong. I appreciate the help. :)