How do I make diagonal lines with CSS?

I'm working on a website and would like to add diagonal lines to a background.

The website is here: Kids EPs | Kids Songs | Kids Music | Music for Children

I'd like to add diagonal lines to the background of the navigation bar to match the ones in the header.

Does anyone know the css code that would accomplish that? The website theme is built on Thematic. Here's the present code for the navigation menu bar:

/*Menu*/
#access {
background-color: #6eaeca !important;
border: #212c8a solid 2px;
border-top: none;
border-bottom: none;
height: 38px;
margin: 0 auto;
width: 956px;
}
.menu {
margin:0px;
}
.sf-menu a, .sf-menu a:visited {
background-color: #6eaeca !important;
border: none;
color: #000 !important;
font-family: Tahoma, Arial, Helvetica, Tahoma, sans-serif;
font-size: 16px;
padding-left: 19px;
padding-right: 19px;
/*text-shadow:
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff;*/
}
.sf-menu a:hover {
background-color: #6eaeca !important;
color: #ffff99 !important;
}
.sf-menu .current_page_item a {
color: #ffffff;
}
.sf-menu .current_page_parent a {
color: #ffffff;
}
.sf-menu li.current_page_parent ul.children li.current_page_item a {
color: #ffffff;
}
.sf-menu li:hover {
background-color: #6eaeca !important;
}
ul.children {
color: #ccc;
margin-top: 6px;
}
.sf-menu li ul.children li a {
color: #fff !important;
background-color: #6eaeca !important;
}
.sf-menu li ul.children li a:hover {
background-color: #6eaeca !important;
color: #ffff99 !important;
}
h1.entry-title {
display: none;
}