background-image и кривые руки

[WabFad]

Всем привет, наткнулся на такую проблемку. Верстаю свой первый дизайн, предварительно пройдя самоучитель css. Сильно не бейте если вопрос очень нубский. Так вот.

html код выкладывать не буду так как там просто стандартные классы footer header и т.д.

в вот css код такой

* {
margin: 0;
padding: 0;
font-size: 100%;
}
body {
background-color: #fff111;
height: auto; 
min-height: 100%;
}


#header {
padding: 30px;
}

#content {
margin: 10px auto;
width: 700px;
color: #000;
background-color: #fff;
}

#footer {
    height: 40px;
    width: 100%;
    position: absolute;
    left:0;
    bottom: 0;
    background-image: url(images/foot.png) repeat-x #000;
}

но картинка на фон футера не накладывается. если ниже прописать

background-color: white;

то цвет заливается. вопрос что я делаю не так?) дизайн под wordpress, файлы хранятся в wp-content/themes/mytheme

[buddah]

Просто background а не background-image раз указываешь репит.

[Softlink]

background:#000 url(images/foot.png) repeat-x ;

так будет работать

[WabFad]

Большое спасибо, и правда работает, но почему просто бекграунд? за фоновое изображение ведь отвечает background-image

[buddah]

Большое спасибо, и правда работает, но почему просто бекграунд? за фоновое изображение ведь отвечает background-image

Потому что ты указываешь еще и repeat и цвет фона. А за эти функции отвечают background-repeat и background-color.

background - это собирательное свойство.

http://htmlbook.ru/css/background

Edited July 4, 2011 by buddah

[WabFad]

buddah

Большое спасибо! Теперь все ясно!

[WabFad]

еще вопрос, код футера тот же, при добавлении большего количества новостей на сайт, футер не двигается вместе с низом браузера, а остается на своем месте.

подскажите как сделать что бы футер был прибит к полу, но не на одном месте?

для наглядности во скрин

http://s42.radikal.ru/i098/1107/6d/f25a51b34832.jpg

Edited July 4, 2011 by WabFad

[rookie]

как сделать что бы футер был прибит к полу, но не на одном месте?

Как-то так:

<div id="wrapper1">
  <div id=wrapper2>
    ...content
  </div>
</div>
<div id="footer"></div>

  html,body {height: 100%}

  #wrapper1{
    min-height: 100%;
    margin-bottom: -200px;
  }

  #wrapper2 {
    padding-bottom: 200px;
  }

  #footer {
    height: 200px;
  }

Edited July 5, 2011 by rookie