CSS отрезал мое изображение

Сайт должен выглядеть так: http://funedit.com/imgedit/soubory/small_17663057361396452975.jpg

Но на самом деле это выглядит так: http://funedit.com/andurit/ (оно обрезает это предупреждающее изображение, а также перемещает его на левый сайт вместо правого.

Может кто-нибудь помочь мне и объяснить, что я делаю не так, я новичок в CSS

Мой HTML:

 <body> 
 <div class="top-panel">
    <div id="center"> <a class="top-button" href="#"></a>
       <span class="text">Prave hraje <b>5000</b> hracov na <b>150</b> serveroch!</span>
       <span class="panel">Registruj sa zdarma nebo</span>
        <input type="text">
        <input type="text">
        <input type="image" id="login-button" src="images/login_button.png" alt="Submit">
       <div class="tournament"> Night Cup 2014 - Sledujte priamy prenos! </div> 
    </div>
 </div>
 </body>

мой CSS:

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;
}
Источник

2 ответа

Вы устанавливаете изображение как фоновое изображение. В то время как 'text-align' действительно перемещает текст вправо, фоновые изображения не затрагиваются этим.

Просто измените код на:

<div class="tournament"
    <img src="..." /> 
    Night Cup 2014 - Sledujte priamz prenos!
</div>

поэтому он будет соответствовать тексту.

Источник

Попробуйте добавить:

body { background-size: 100%;}
.tournament{
  width: 30%;
  right: 10%;
  position: absolute;
  height: 30px;
}
Источник
Другие вопросы по тегам