title: More Robust code for HTML/CSS
body: <p>I wrote a great little piece of code (<em>really</em> trying not to be cocky with that) implementing a nice background changing across three types of filtering.  Here's the html:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;!-- Head --&gt;
  &lt;head&gt;
      &lt;title&gt;html_three_vertical_div_backgrounds&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;   
  
      &lt;!-- Area for Additional Links --&gt;
      &lt;link rel='stylesheet' type='text/css' href='html_three_vertical_div_backgrounds.css' /&gt;
  &lt;/head&gt;
  
  &lt;!-- Body --&gt;
  &lt;body&gt;
      &lt;div id='left'&gt;&lt;/div&gt;
      &lt;div id='middle'&gt;&lt;/div&gt;
      &lt;div id='right'&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>... and the CSS:</p>
  
  <pre><code>#left {
  /* Set the float (left) */
  float: left;
  /* Set the width */
  width: 33%;
  /* Set the height */
  height: 100vh;
  /* Filter */
  -webkit-filter: grayscale(1);
  /* We actually have to post the image all three times */
  background-image: url("http://images2.fanpop.com/image/photos/9800000/Great-Mountains-mountains-and-waterfalls-9842020-1920-1440.jpg");
  background-attachment: fixed;
  background-size: cover;
  }
  
  #middle {
  float: left;
  width: 34%;
  height: 100vh;
  -webkit-filter: sepia(1);
  background-image: url("http://images2.fanpop.com/image/photos/9800000/Great-Mountains-mountains-and-waterfalls-9842020-1920-1440.jpg");
  background-attachment: fixed;
  background-size: cover;
  }
  
  #right {
  float: left;
  width: 33%;
  height: 100vh;
  -webkit-filter: contrast(3);
  background-image: url("http://images2.fanpop.com/image/photos/9800000/Great-Mountains-mountains-and-waterfalls-9842020-1920-1440.jpg");
  background-attachment: fixed;
  background-size: cover;
  }
  
  body {
  margin:0;
  padding:0;
  }
  </code></pre>
  
  <p>Here's what it looks like at the end:</p>
  
  <p><img src="https://i.stack.imgur.com/moFiz.jpg" alt="Three divs with filters for backgrounds"></p>
  
  <p>But I feel like there's a better way I could implement this.  Any suggestions on how this could be done in a better/more efficient way?  </p>