Фоновое изображение заголовка не будет отображаться

Question

У меня есть заголовок с фоновым URL, но он не будет отображаться. Код ниже.

Желаемый результат заключается в том, чтобы заголовок имел фоновое изображение с lo go и nav, отображаемым поверх него. Поэтому текст написан поверх фонового изображения.

header {
  height: 600px;
  width: 100%;
  background: url("img/headerbg.jpg") cover no-repeat;
}

.header-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.logo {
  width: 10em;
}

nav {
  vertical-align: middle;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline;
}

nav ul li a {
  font-size: 1.2em;
  color: #80797F;
  padding: 1em;
  text-decoration: none;
}

nav ul li a:hover {
  color: #5CC6FF;
}

<header>
  <div class="header-bar">
    <div class='logo'>
      <a href='index.html'><img src="img/logo.svg" alt="Logo"></div>
    <nav>
      <ul>
        <li><a href='#Services'>Services</a></li>
        <li><a href='#Portfolio'>Portfolio</a></li>
        <li><a href='#About'>About</a></li>
        <li><a href='#Team'>Team</a></li>
        <li><a href='#Contact'>Contact</a></li>
      </ul>
    </nav>
  </div>
  <div class='header-text'>
    <h3>Welcome to our studio</h3>
    <h1>It's Nice To Meet You</h1>
    <button>Tell Me More</button>
  </div>
</header>

Answer 1

Пожалуйста, смотрите код ниже

header{
    height: 600px;
    width: 100%;
    background: url("https://image.shutterstock.com/image-photo/summer-beach-holiday-online-shopping-260nw-461355724.jpg") no-repeat;
    background-size: cover;
}
.header-bar{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.logo{
    width: 10em;
}
nav{
    vertical-align: middle;
}
nav ul{
    list-style: none;
}
nav ul li{
    display: inline;
}
nav ul li a{
    font-size: 1.2em;
    color: #80797F;
    padding: 1em;
    text-decoration: none;
}
nav ul li a:hover{
    color: #5CC6FF;
}

<header>
    <div class="header-bar">
    <div class='logo'><a href='index.html'><img src="img/logo.svg" alt="Logo"></div>
    <nav>
      <ul>
        <li><a href='#Services'>Services</a></li>
        <li><a href='#Portfolio'>Portfolio</a></li>
        <li><a href='#About'>About</a></li>
        <li><a href='#Team'>Team</a></li>
        <li><a href='#Contact'>Contact</a></li>
      </ul>
    </nav>
  </div>
    <div class='header-text'>
      <h3>Welcome to our studio</h3>
      <h1>It's Nice To Meet You</h1>
      <button>Tell Me More</button>
    </div>
  </header>

Пожалуйста, обновите ниже css и заголовок Фоновое изображение Показать

header{
height: 600px;
width: 100%;
background: url(images/headerbg.jpg) no-repeat;
background-size: cover;

}

Answer 2

Попробуйте это:

1. header{
       height: 600px;
       width: 100%;
       background: url("img/headerbg.jpg") no-repeat;
       background-size: cover;
   }
   

2. Ошибка в HTML

   <div class='logo'><a href='index.html'><img src="img/logo.svg" alt="Logo"></a></div>
   

Answer 3

Я думаю, что код html кажется неправильным .. Пожалуйста, закройте тег привязки ..

<div class='logo'><a href='index.html'><img src="img/logo.svg" alt="Logo"></a></div>