CODEWITHSUNDEEP
css
user1261800
user1261800

Reputation:

Background div image- repeating issue

I am currently working with a banner i like to place in the background of my header section. The problem I am having is that the image is repeating itself. I have tried using attribute no-repeat and in result I do not get anything to show. The image is set as a background for #header div. How can i get the image to appear without repeating?

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>

Upvotes: 0

Views: 170

Answers (3)

Alfred
Alfred

Reputation: 21406

You may try this also;

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

Upvotes: 0

Alex
Alex

Reputation: 7688

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

proof: http://awesomescreenshot.com/029cplk1d

but you might as well do it this way:

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

Upvotes: 2

Shailender Arora
Shailender Arora

Reputation: 7788

u can get your desired results through this :- 

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

Upvotes: 0

Related Questions