Replace navigation bar color with an image's

image navbar

main nav #wrap {
  width: 100%;
  height: 50px;
  margin: 0;
  z-index: 2;
  position: relative;
  background-color: #3a3a3a; }
  main nav #wrap .navbar {
    height: 40px;
    padding: 0;
    margin: 0;
    position: absolute; }
    main nav #wrap .navbar li {
      height: auto;
      width: 150px;
      float: left;
      text-align: center;
      list-style: none;
      font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
      padding: 0;
      margin: 0;
      top: 20px;
      background: #3a3a3a; }
    main nav #wrap .navbar a {
      padding: 18px 0;
      text-decoration: none;
      color: white;
      display: block; }
    main nav #wrap .navbar li:hover, main nav #wrap .navbar a:hover {
      background-color: #54879d; }
    main nav #wrap .navbar li ul {
      display: none;
      height: auto;
      margin: 0;
      padding: 0; }
    main nav #wrap .navbar li:hover ul {
      display: block; }
    main nav #wrap .navbar li ul li {
      background-color: #54879d; }
    main nav #wrap .navbar li ul li a {
      border-left: 1px solid #1f5065;
      border-right: 1px solid #1f5065;
      border-top: 1px solid #74a3b7;
      border-bottom: 1px solid #1f5065; }

<main>
    <nav>
        <div id="wrap">
            <ul class="navbar">
                <li><a href="#">Home</a></li>
                <li><a href="#">Retrievals</a>
                    <ul>
                        <li><a href="#">Data Listing</a></li>
                        <li><a href="#">Web Scheduling</a></li>
                        <li><a href="#">Google Maps Application</a></li>
                    </ul>
                </li>
                <li><a href="#">Reporting</a>
                    <ul>
                        <li><a href="#" >Ad Hoc Report</a></li>
                        <li><a href="#">Drill Down Report</a></li>
                        <li><a href="#">Ranking Report</a></li>
                    </ul>
                </li>
                <li><a href="#">Business Intelligence</a>
                    <ul>
                        <li><a href="#">Business Dashboard</a></li>
                        <li><a href="#">Web Pivot Table</a></li>
                        <li><a href="#">Interactive Report</a></li>
                        <li><a href="#">What-If Analysis</a></li>
                    </ul>
                </li>
                <li><a href="#">Data Maintenance</a>
                    <ul>
                        <li><a href="#">Database CRUD</a></li>
                        <li><a href="#">Database Update</a></li>
                        <li><a href="#">Order Entry</a></li>
                        <li><a href="#">Drag-and-Drop Application</a></li>
                    </ul>
                </li>
                <li><a href="#">B2B Portal</a>
                    <ul>
                        <li><a href="#">B2B Portal</a></li>
                        <li><a href="#">Secure Data-Driven Listings</a></li>
                        <li><a href="#">Secure Shopping Cart</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</main>

I have this navigation bar.I am trying to replace that gray color with the one of this picture.As you can see, it is not a simple color..It has small transparent dots.It is anyway I can copy that color ?I dont want to use the image.