Replace navigation bar color with an image's

Question

This is how navigation bar image looks like:

Code Snippet

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>

nav bar picture

I have this navigation bar and I am trying to replace that gray color with the one of the above attached image. As you can see, it is not a simple color. It has small transparent dots.

Is there anyway I can copy that color?

PS: I do not want to use the image.

Your navigation background looks like a gradient. Maybe you might want to use one instead. [Gradient CSS Generator](http://www.cssmatic.com/gradient-generator) is a nice tool go grab your CSS for a custom gradient fast! — AlexG, Aug 26 '16 at 08:05
@AlexG where are you getting gradient from? The supplied image shows some faint noise, not a gradient. Which I guess is what the OP means by "small transparent dots". Also I might be wrong but I don't think noise is possible with pure css. — Sworrub Wehttam, Aug 26 '16 at 08:18

score 2 · Answer 1 · edited May 23 '17 at 12:08

As I mentioned on my comment, there's no css method for adding noise. However, you can embed images in html by base64 encoding them. I've pinched the code from this answer, it's transparent so can be applied over any colour. If you need a different level/style of noise then you'll have to create it and base64 encode it (a simple google search will bring plenty of options).

Anyway, hope this helps!

main nav #wrap {
    width: 100%;
    height: 50px;
    margin: 0;
    z-index: 2;
    position: relative;
    background-color: #3a3a3a;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
}
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-color: #3a3a3a;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
}
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>

Replace navigation bar color with an image's

Code Snippet

1 Answers1