Question

我目前正在使用横幅广告，我希望将其放置在标题部分的背景中。我遇到的问题是图像正在重复。我尝试使用属性no-repeat，结果我没有得到任何显示。图像被设置为#header div的背景。如何在不重复的情况下显示图像？

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>

背景div图像重复问题

3 个答案: