Adding a repeating image under a navigation bar

Question

I'm trying to reproduce a header that looks something similar to this:

But I can't seem to be able to create the repeating diamond pattern under the black bar. The diamond pattern looks like this:

Here's what I currently have written in HTML and CSS, it's only a test version for now

    figure {
      background: black;
      border-radius: 3px;
      height: 50px;
      margin: 0px;
    }
    html {
      background-color: grey;
      width: 1212px;
      height: 1476px;
      margin: auto;
    }
    img {
      border-radius: 100%;
      position: relative;
      vertical-align: middle;
      left: 50px;
      bottom: 30px;
    }
    figcaption {
      display: inline-block;
      vertical-align: middle;
    }
    li {
      display: inline-block;
      text-decoration: none;
      overflow: hidden;
      margin-bottom: 50px;
    }
    a {
      list-style: none;
      text-decoration: none;
      text-align: center;
      color: white;
    }
    ul:first-child {
      float: left;
      margin-left: 100px;
    }
    ul:last-child {
      float: right;
      margin-left: 550px;
    }
    div {
      background-color: blue;
      width: 100%;
      height: 70px;
    }

<div></div>
<figure>
  <img width="100" height="100" src="http://i.imgur.com/HiCMdId.png" />
  <figcaption>
    <ul>
      <li>
        <a href="">test</a>
        <a href="">test</a>
      </li>
    </ul>
    <ul>
      <li><a href="">test</a>
      </li>
      <li><a href="">test</a>
      </li>
      <li><a href="">test</a>
      </li>
      <li><a href="">test</a>
      </li>
    </ul>
  </figcaption>
</figure>

Answer 1

This is what I got. I am using a psuedo element called ::after. Just be warned, since there is no class called on the figure that if you made any other figure tags on the page, they would also have that background unless you override the styles.

figure {
  background: black;
  border-radius: 3px;
  height: 50px;
  margin: 0px;
  position: relative;
}
figure::after {
  content: ' s';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: url(https://i.sstatic.net/bisH4.png) repeat-x 0 0;
  z-index: -1;
  display: block;
  color: transparent;
  background-size: 10px 10px;
}
html {
  background-color: grey;
  width: 1212px;
  height: 1476px;
  margin: auto;
}
img {
  border-radius: 100%;
  position: relative;
  vertical-align: middle;
  left: 50px;
  bottom: 30px;
}
figcaption {
  display: inline-block;
  vertical-align: middle;
}
li {
  display: inline-block;
  text-decoration: none;
  overflow: hidden;
  margin-bottom: 50px;
}
a {
  list-style: none;
  text-decoration: none;
  text-align: center;
  color: white;
}
ul:first-child {
  float: left;
  margin-left: 100px;
}
ul:last-child {
  float: right;
  margin-left: 550px;
}
div {
  background-color: blue;
  width: 100%;
  height: 70px;
}

<div></div>
<figure>
  <img width="100" height="100" src="http://i.imgur.com/HiCMdId.png" />
  <figcaption>
    <ul>
      <li>
        <a href="">test</a>
        <a href="">test</a>
      </li>
    </ul>
    <ul>
      <li><a href="">test</a>
      </li>
      <li><a href="">test</a>
      </li>
      <li><a href="">test</a>
      </li>
      <li><a href="">test</a>
      </li>
    </ul>

  </figcaption>
</figure>

Answer 2

You should put the image as a background to a div that spans the whole width of the menu. You can remove the image src from the HTML.

So your CSS would look similar to this :

figure{
   background-image: url('http://i.imgur.com/HiCMdId.png');
   background-repeat: background-repeat: repeat-x;
   width: 100%;
 }