在網頁制作中，導航欄是非常重要的一個部分，它可以幫助用戶快速地找到所需的信息，同時也是網站整體風格的重要組成部分。在這篇文章中，我們將會介紹如何使用CSS導航欄并添加背景圖片。

首先，我們需要創建一個基本的導航欄。在HTML文件中，我們可以使用

和
• 標簽來創建一個無序列表。代碼如下：

  <ul class="navbar">
  <li><a href="#">首頁</a></li>
  <li><a href="#">關于我們</a></li>
  <li><a href="#">產品</a></li>
  <li><a href="#">聯系我們</a></li>
  </ul>

  接下來，我們在CSS文件中添加樣式，并將背景圖片添加到導航欄中。代碼如下：

  .navbar {
  list-style: none;
  background-image: url("path_to_image.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 10px 20px;
  margin-bottom: 20px;
  }
  .navbar li {
  display: inline-block;
  margin-right: 30px;
  }
  .navbar li:last-child {
  margin-right: 0;
  }
  .navbar a {
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  }
  .navbar a:hover {
  color: #333;
  }

  在上面的代碼中，我們使用了background-image屬性將背景圖片添加到導航欄中，并使用background-repeat屬性設置不重復，background-size屬性設置為cover。此外，我們還設置了padding和margin，以及鏈接的顏色和字號，以及鼠標懸停時鏈接的顏色。

  通過這些簡單的CSS樣式，我們可以輕松地創建一個漂亮的導航欄，并將背景圖片添加到其背景中。這樣的導航欄既美觀又實用，可以讓用戶更輕松地瀏覽您的網站。