CodePen

HTML

            
              <div id="navigation">
   <ul>
     <li><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

            
              /* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #8b8a96;
	background: url(images/noise.png) repeat;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* END RESET */

#navigation {
	height: 33px;
	float: right;
	margin-top: 74px;
}

#navigation ul {
	background: url(http://bit.ly/OEhsb6) repeat;
	height: 33px;
	float: left;
  list-style: none;
}

#navigation ul li {
	float: left;
	height: 33px;
	margin-left: 34px;
	line-height: 33px;
	vertical-align: middle;
	font-family: Conv_nevis_bold, Arial, Helvetica;
	font-size: 12px;
}

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

#navigation li a:link, #navigation li a:visited {
	color: #fff;
	text-decoration: none;
	height: 36px;
	display: block;
}

#navigation:before {
    float: left;
	display: block;
	content: " ";
	height: 33px;
	width: 12px;
    background-image: url(http://bit.ly/SHtCLE);
}

#navigation:after {
	content: " ";
	width: 12px;
	height: 33px;
    float: right;
    background-image: url(http://bit.ly/VxfV6H);
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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