css - 背景 div 图像重复问题

Question

我目前正在使用我喜欢放置在标题部分背景中的横幅。我遇到的问题是图像在重复。我尝试过使用属性no-repeat，结果我没有得到任何显示。图像被设置为#headerdiv 的背景。我怎样才能让图像出现而不重复？

CSS

<style>
#header {
    height:165px;
    border-top:15px solid #000;
    background-image:  url(http://webprolearner2346.zxq.net/css-test2/images/banner1.png);
}
</stle>

HTML

<div id="header">
      <div class="search"><input type="text" class="search-input" name="search" value="Search" onclick="$(this).val('');" /><input type="submit" class="search-submit" /></div>
      <div id="navigation">

       <ul class="button-list">
       <h2>MAIN TITLE PAGE</h2>
        <li><a href="#" class="buttonNav" >Content 1</a></li>
        <li><a href="#" class="buttonNav" >Content 2</a></li>
        <li><a href="#" class="buttonNav" >Content 3</a></li>
        <li><a href="#" class="buttonNav" >Content 4</a></li>
        <li><a href="#" class="buttonNav" >Content 5</a></li>   
       </ul> 
      </div>
     </div>

Answer 1

#header {
    height:165px;
    border-top:15px solid #000;
    background-image: url('http://webprolearner2346.zxq.net/css-test2/images/banner1.png');
    background-repeat: no-repeat;
}

证明：http ://awesomescreenshot.com/029cplk1d

但你也可以这样做：

background: url('http://webprolearner2346.zxq.net/css-test2/images/banner1.png') no-repeat;

Answer 2

你可以通过这个得到你想要的结果：-

#header {
        background-image: url("http://webprolearner2346.zxq.net/css-test2/images/banner1.png");
        background-repeat: no-repeat;
        border-top: 15px solid #000000;
        height: 165px;
    }

Answer 3

你也可以试试这个；

<style>
#header {
    height:165px;
    border-top:15px solid #000;
    background:url(http://webprolearner2346.zxq.net/css-test2/images/banner1.png) no-repeat;
}
</style>