title: CSS cut off my image
body: <p>The site should looks like:
  <a href="http://funedit.com/imgedit/soubory/small_17663057361396452975.jpg" rel="nofollow">http://funedit.com/imgedit/soubory/small_17663057361396452975.jpg</a></p>
  
  <p>But it actualy looks like:
  <a href="http://funedit.com/andurit/" rel="nofollow">http://funedit.com/andurit/</a> (it cut that warning image and also move it on left site instead of right.</p>
  
  <p>Can someboddy help me and explain me what i am doing wrong, i am newbie in CSS</p>
  
  <p>My HTML:</p>
  
  <pre><code> &lt;body&gt; 
   &lt;div class="top-panel"&gt;
      &lt;div id="center"&gt; &lt;a class="top-button" href="#"&gt;&lt;/a&gt;
         &lt;span class="text"&gt;Prave hraje &lt;b&gt;5000&lt;/b&gt; hracov na &lt;b&gt;150&lt;/b&gt; serveroch!&lt;/span&gt;
         &lt;span class="panel"&gt;Registruj sa zdarma nebo&lt;/span&gt;
          &lt;input type="text"&gt;
          &lt;input type="text"&gt;
          &lt;input type="image" id="login-button" src="images/login_button.png" alt="Submit"&gt;
         &lt;div class="tournament"&gt; Night Cup 2014 - Sledujte priamy prenos! &lt;/div&gt; 
      &lt;/div&gt;
   &lt;/div&gt;
   &lt;/body&gt; 
  </code></pre>
  
  <p>my CSS:</p>
  
  <pre><code>body {
      background-image:url('images/background.png');
      background-color:#cccccc;
      margin: 0 auto;
  }
  #center {
      width: 1030px;
      margin: 0 auto;
      /*display: inline-block; */
  }
  .top-panel {
      background-image: url("images/top_panel.png");
      background-repeat: repeat-x;
      background-position: center;
      height: 43px;
      padding-top:5px;
      display: block;
  }
  a.top-button {
      background-image: url("images/top_button.png");
      height: 37px;
      width: 141px;
      background-repeat: no-repeat;
      display: inline-block;
      margin-left: 50px;
  }
  .text {
      color: #9c9c9c;
      padding: 0px 10px;
  }
  .panel {
      color: #6ab1ed;
      padding: 0px 350px;
      display: inline-block;
  }
  input{
      vertical-align:top;
      display: inline-block;
      height: 25px;
      line-height: 25px;
      text-align: center;
      position: relative; left: 510px; top: 2px;
  }
  span{
      position: absolute;
      display: inline-block;
      height: 35px;
      line-height: 35px;
      text-align: center;    
  }
  span b{
      font-weight:bold;
  }
  #login-button{
      /*background-image: url("images/login_button.png");   uz je to v HTML*/
      height: 27px;
      width: 81px;
      line-height: 27px;
      display: inline-block;
      position: relative; left: 510px; top: 4px; 
  }
  .tournament{
      background-image: url("images/warning.png");
      background-repeat: no-repeat;
      text-align: right;
      display: block;
      color: #d4d4d4;
  }
  </code></pre>