2

Подскажите почему фон не растягивается на всю страницу?

#main {
  background-image: url('../images/tires.png');
  color: #fff;
  max-width: 100%;
  height: auto;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: relative;
  /* background-position: center center; */
}
<div id="main">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <div class="row">

        </div>
      </div>
    </div>
  </div>
</div>

3 ответа 3

4

Здесь в коде вообще всего много. Вот пример как можно сделать.

html, body {
  height: 100%;
  }
#main {
  display: block;
  height: 100%;
  background: url('http://sheridanhistory.com/wp-content/uploads/2014/07/tires.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
 color: #333;
 }
3
  • И что значит на всю страницу? растянуть блок по высоте? Если да, то в примере видно, что нужно указать высоту html и body.
    – NeedH8
    19 ноя 2015 в 16:45
  • мне нужно чтобы фон был ещё и адаптивным, как исправить? 19 ноя 2015 в 16:48
  • Обновил пример и код. PS предупреждаю сразу, адаптивный бэкграунд очень проблематичная штука. Т.к. он вряд ли будет правильно покрывать 100% высоту блока.
    – NeedH8
    19 ноя 2015 в 16:57
1

В Вашем CSS background-size указан дважды:

  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;

и

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

Выберите один вариант.
Второй - правильный.

0

background-size: cover; или backgound-size: 100% 100%. Растягивает фон по Х и по У.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.