CodePen

HTML

            
              <div id="navigation">
   <ul>
     <li class="selected"><a href="index.html">Home</a></li>
     <li><a href="about.html">About</a></li>
     <li><a href="services.html">Services</a></li>
     <li><a href="products.html">Products</a></li>
     <li><a href="blog.html">Blog</a></li>
     <li><a href="contact.html">Contact</a></li>
   </ul>
</div><!--END navigation-->

<!--Links to the images for the nav-->

<!-- background before http://bit.ly/SHuose -->
<!-- background after http://bit.ly/Uf0Bhg -->
<!-- background middle http://bit.ly/T1QPbx -->

<!-- below is the image of what I need it to look like -->

<img src="http://bit.ly/SE1fxu" />

<!--The blue background behind HOME is made up of three images so that it can expand to the size of the navigation. The images are above. background before, after and middle -->
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body {
  padding: 0;
  margin: 0;
  position: relative;
}

#navigation {
  height: 70px;
  background: linear-gradient(left, rgb(37,37,43) 0%, rgb(24,24,28) 100%);
  background-image: -moz-linear-gradient(left , rgb(37,37,43) 0%, rgb(24,24,28) 100%);
  width: 609px;
  margin: 0 auto;
}

#navigation ul {
  background: url(http://bit.ly/OEhsb6) repeat;
  height: 33px;
  float: left;
  list-style: none;
  padding: 0;
  margin: 20px 0 0 40px;
  position: relative;
}

#navigation ul:before, #navigation ul:after {
	content: "";
  display: block;
	height: 33px;
	width: 12px;
  position: absolute;
  top: 0;
  left: -12px;
  background-image: url(http://bit.ly/SHtCLE);
}

#navigation ul:after {
  left: auto;
  right: -12px;
  background-image: url(http://bit.ly/VxfV6H);
}

#navigation ul li {
	float: left;
	height: 36px;
	margin: -4px 12px 0;
	line-height: 33px;
	vertical-align: middle;
  position: relative;
}

#navigation ul li:first-child {
	margin-left: 10px;
}

.selected {
  background: url(http://bit.ly/T1QPbx);
}

.selected:after {
  content: "";
  display: block;
  height: 36px;
  width: 10px;
  background: url(http://bit.ly/Uf0Bhg);
  position: absolute;
  top: 0;
  right: -10px;
}

.selected:before {
  content: "";
  display: block;
  height: 36px;
  width: 10px;
  background: url(http://bit.ly/SHuose);
  position: absolute;
  left: -10px;
  top: 0;
}

#navigation li a:link, #navigation li a:visited {
	color: #fff;
  font-family: Conv_nevis_bold, Arial, Helvetica;
	font-size: 12px;
  letter-spacing: 0.08em;
	text-decoration: none;
  text-transform: uppercase;
	height: 36px;
	display: block;
  padding: 6px 5px;
  text-shadow: 1px 1px 0.2em #333;
}


div~img {
  position: absolute;
  top: 100px;
  left: 50%;
  margin-left: -305px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................