如何将图像添加到横幅并使其位置调整以更改屏幕宽度

Question

我正在尝试将照片添加到横幅中，并将其放在我网页上的徽标正上方。无论屏幕尺寸如何，我希望照片保持在相同的位置（在徽标上方），现在它保持在横幅中的相同位置。我该如何解决这个问题？

我当前的代码如下所示

div#banner {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #00AD83;
  width: 100%;
  height: 100px;
}
div#banner-content {
  position: static;
  margin-left: 25%;
  padding: 0px;
  z-index: 1;
}
div#main-content {
  padding-top: 70px;
}

<div id="banner">
  <div id="banner-content">
    <img src="/img/Banner-Words.jpg" alt="URGENT APPEAL" style="width:349px;height:100px;">
  </div>

Answer 1

为您的徽标提供固定边距，而不是百分比。

div#banner-content { 
position: static;
margin-left: 30px; 
padding: 0px; 
z-index: 1;
}

Answer 2

background-image="/img/Banner-Words.jpg" ？