How to extend columns background outside of grid, while maintaining grid in center of page?

Question

Some time ago, i was hired to create company website. With help of Zurb Foundation Framework, i created site with layout like this:

It's just a grid with several rows(for header, main area, and footer), each of which divided to two columns(4 for left side and 8 for right side).

Client loved this design, so it was deployed to production.

Several months later, client started to want something new in this site design. So he hired independent designer for consultation. Designer said that everything is good, but it's need some "simple feature" - background colors for some visual blocks. He photoshoped screenshot of site and send it to client.

With his edits, new site layout should look like this:

Is there any way to make blocks backgrounds be extended to outside of the grid, while maintaining grid itself in center of page? And if it's not possible, and only way is to add additional blocks for that 'extending backgrounds' - how to maintain their height and position in sync with main layout blocks?

Is there any way to get this with minimal number of edits, without rebuilding whole layout?

G-Cyrillus · Answer 1 · 2016-03-17T21:01:32.770

You can use background-size and position with gradient or image :

you can reverse gradient .... (example in codepen linked below playing with colors)

codepen to play with

main , header div, footer div{
  width:800px;
  margin:auto;
  box-shadow: 0 0 5px;
}
* {
  box-sizing:border-box;
}
section , header h1, footer nav{
  width:600px;
  float:right;
  padding:1em;
}
footer h3 {
  float:left;
  width:200px;
}
footer {
  text-align:center;
  line-height:50px;
  overflow:hidden;
}
li {
  display:inline-block;
  margin:0;
}
aside {
  padding:1em;
  overflow:hidden;
}
html {
  background:linear-gradient(to left, gray 74.25%,black,  white 74.5% ) center repeat-y ,linear-gradient(to left, gray 50%, white 50% ) gray repeat-y top right;
  background-size: 800px 800px, 100% 100% ;
  min-width:800px;/* mind this */
}
img {
  margin:20px 50px;
}
header{
  background:linear-gradient(to left, white 74.25%,black,  gray 74.5% ) center repeat-y ,linear-gradient(to left, white 50%, gray 50% ) gray repeat-y top right;
  background-size: 800px 800px, 100% 100% ;
  min-width:800px;/* mind this */
}
 footer {
  background:linear-gradient(to left, white 74.25%,black,  gray 74.5% ) center repeat-y ,linear-gradient(to left, turquoise 50%, tomato 50% ) gray repeat-y top right;
  background-size: 800px 800px, 100% 100% ;
  min-width:800px;/* mind this */
}
body {
  margin:0;
  display:flex;
  min-height:100vh;
  flex-direction:column;
}
main {
  flex:1;
  }

<header>
  <div class="top">
    <h1> play me in full page</h1>
    <img src="http://lorempixel.com/100/100/"/>
  </div>
</header>
<main>
  <section><h1>HTML Ipsum Presents</h1>
        
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>
        
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
</section>
<aside>
<h3>Header Level 3</h3>

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a { 
 display: block; 
 width: 300px; 
 height: 80px; 
}
</code></pre>
</aside>
</main>
<footer>
  <div class="top">
    <h3>footer title </h3>
    <nav>
 <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Clients</a></li>
  <li><a href="#">Contact Us</a></li>
 </ul>
</nav>
  </div>
</footer>

How to extend columns background outside of grid, while maintaining grid in center of page?

1 Answers1