title: Simple HTML and CSS background repeat
body: <p>My website is <a href="http://nickliddell.com/pieres" rel="nofollow">http://nickliddell.com/pieres</a>.</p>
  
  <p>As you can see, the background on the header is repeating. I tried adding <code>background-repeat:no-repeat;</code> to all of the divs that is in the header, and it is still repeating.
  Here is my header.php</p>
  
  <pre><code>&lt;?php
  /**
   * The Header for our theme.
   *
   * @package WordPress
   */
   global $cubby_options;
  ?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html &lt;?php language_attributes(); ?&gt;&gt;
  &lt;head&gt;
  &lt;meta charset="&lt;?php bloginfo( 'charset' ); ?&gt;" /&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
  &lt;title&gt;
  &lt;?php wp_title('|', true, 'right'); ?&gt;
  &lt;/title&gt;
  &lt;?php wp_head(); ?&gt;
  &lt;/head&gt;
  &lt;body &lt;?php body_class(); ?&gt;&gt;
  &lt;center&gt;
  &lt;div class="header"&gt;
    &lt;div class="top"&gt;
      &lt;div class="container"&gt;
        &lt;div class="contact left"&gt;
          &lt;?php  echo cubby_options_array('top_contact_info') ; ?&gt;
        &lt;/div&gt;
        &lt;div class="follow right"&gt; &lt;?php echo cubby_get_social_network(array("skype","facebook",'twitter','google_plus','youtube',"linkedin",'pinterest','rss'));?&gt; &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="top2"&gt;
      &lt;div class="container"&gt;
  
        &lt;div class="logo left"&gt;&lt;a href="&lt;?php echo esc_url(home_url('/')); ?&gt;"&gt;
          &lt;?php if ( cubby_options_array('logo')!="") { ?&gt;
          &lt;img src="&lt;?php echo cubby_options_array('logo'); ?&gt;" alt="&lt;?php bloginfo('name'); ?&gt;" /&gt;
          &lt;?php }else{ ?&gt;
          &lt;span class="site-name"&gt;
          &lt;?php bloginfo('name'); ?&gt;
          &lt;/span&gt;
          &lt;?php }?&gt;
          &lt;/a&gt;&lt;span class="tagline"&gt;&lt;?php echo  get_bloginfo( 'description' );?&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="menu_bottom"&gt;
      &lt;?php do_action('wp_menubar','Home'); ?&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/center&gt;
  &lt;!--header--&gt;
  </code></pre>
  
  <p>Here is my stylesheet:</p>
  
  <pre><code>.top2 {
      display:inline-block;
      width:100%;
      min-height:186px;
      background:#cccccc;
      padding:20px 0 0;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      background-repeat:no-repeat;
  }
  .container {
      width:960px;
      margin:0 auto;
      background-repeat:no-repeat;
  }
  .top {
      height:20px;
      background:#333333;
      padding:5px 0;
      color:#ccc;
      background-repeat:no-repeat;
  }
      min-height:60px
      margin-left:auto;
      margin-right:auto;
      background-repeat:no-repeat;
  }
  .top2 .menu_bottom{
      display: block;
      position: absolute:
      width: 100%;
      bottom: -20px
  }
  .header {
      }.center-content,.footer {
      margin-top:20px;
  }
  </code></pre>
  
  <p>Sorry I'm new to html and css. I was also wondering, how come in the stylesheet it states the classes as having a color as a background, but on the page it shows the image?
  All replies are appreciated :)</p>