1

Использовал и <meta name="viewport" content="width=1200"> и адаптивный - ничего не помогает.

Макет фиксированный. Фон должен быть на всю ширину экрана (не .wrap'a). Но почему-то при сужении экрана, фон обрезается, даже не по обертке.

Помогите пожалуйста, что делаю не так, почему так происходит?

.wrap {
  width: 800px;
}

.st {
  background: url(http://www.mountainguides.com/photos/everest-south/c2_2011b.jpg) no-repeat center center;
background-size: cover;
  -webkit-background-size: cover;
}
<main>
  <div class="st">
    <div class="wrap">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat et in culpa, esse animi sunt deleniti quibusdam quae debitis quidem ut voluptate autem, accusantium impedit perferendis aliquid expedita dolores blanditiis mollitia sapiente. Magni, cum in atque nulla inventore voluptatibus blanditiis nihil aperiam placeat velit, eaque sit sapiente, labore vitae nisi. Vero laborum fugit saepe ullam illo maxime aliquid consequatur, officiis amet nostrum quia quae ratione ad praesentium soluta, sed eligendi, cupiditate quis explicabo distinctio maiores fugiat ipsum ab voluptate. Consectetur dolor repudiandae enim asperiores non, rerum, unde sapiente accusamus? Accusamus saepe praesentium ipsa, amet accusantium fugit, ut sit quisquam reprehenderit.
      </p>
    </div>
  </div>
</main>

1
  • не по обёртке - потому что бек-сайз задан cover. задайте 100% 100%, и будет его корёжить, но займёт все доступное ему пространство.
    – Maximmka
    25 ноя 2016 в 8:04

2 ответа 2

2

Любой блок занимает всю ширину родителя, если иное значение ширины не указано. В Вашем случае у .st родитель main, а у main родитель body. Ширина body равна ширине окна, также если иное не указано.

Если выполнить Ваш код, это хорошо видно – у body margin: 8px и фон блока .st имеет такой же отступ.

Самое лучшее решение предложила Elena Semenchenko, задать min-width для .st или main. Также можно указать для .wrap display: table или display: inline-block, но в этом случае лучше подробнее ознакомится со спецификацией, чтобы знать, где могут возникнуть проблемы.

С указанием min-width

main {
  min-width: 800px;
}
.st {
  background: url(http://www.mountainguides.com/photos/everest-south/c2_2011b.jpg) center/cover no-repeat;
}
.wrap {
  width: 800px;
}
<main>
  <div class="st">
    <div class="wrap">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat et in culpa, esse animi sunt deleniti quibusdam quae debitis quidem ut voluptate autem, accusantium impedit perferendis aliquid expedita dolores blanditiis mollitia sapiente. Magni, cum
        in atque nulla inventore voluptatibus blanditiis nihil aperiam placeat velit, eaque sit sapiente, labore vitae nisi. Vero laborum fugit saepe ullam illo maxime aliquid consequatur, officiis amet nostrum quia quae ratione ad praesentium soluta,
        sed eligendi, cupiditate quis explicabo distinctio maiores fugiat ipsum ab voluptate. Consectetur dolor repudiandae enim asperiores non, rerum, unde sapiente accusamus? Accusamus saepe praesentium ipsa, amet accusantium fugit, ut sit quisquam
        reprehenderit.
      </p>
    </div>
  </div>
</main>

С указанием display:inline-block

.st {
  display: inline-block;
  background: url(http://www.mountainguides.com/photos/everest-south/c2_2011b.jpg) center/cover no-repeat;
}
.wrap {
  width: 800px;
}
<main>
  <div class="st">
    <div class="wrap">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat et in culpa, esse animi sunt deleniti quibusdam quae debitis quidem ut voluptate autem, accusantium impedit perferendis aliquid expedita dolores blanditiis mollitia sapiente. Magni, cum
        in atque nulla inventore voluptatibus blanditiis nihil aperiam placeat velit, eaque sit sapiente, labore vitae nisi. Vero laborum fugit saepe ullam illo maxime aliquid consequatur, officiis amet nostrum quia quae ratione ad praesentium soluta,
        sed eligendi, cupiditate quis explicabo distinctio maiores fugiat ipsum ab voluptate. Consectetur dolor repudiandae enim asperiores non, rerum, unde sapiente accusamus? Accusamus saepe praesentium ipsa, amet accusantium fugit, ut sit quisquam
        reprehenderit.
      </p>
    </div>
  </div>
</main>

С указанием display:table

.st {
  display: table;
  background: url(http://www.mountainguides.com/photos/everest-south/c2_2011b.jpg) center/cover no-repeat;
}
.wrap {
  width: 800px;
}
<main>
  <div class="st">
    <div class="wrap">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat et in culpa, esse animi sunt deleniti quibusdam quae debitis quidem ut voluptate autem, accusantium impedit perferendis aliquid expedita dolores blanditiis mollitia sapiente. Magni, cum
        in atque nulla inventore voluptatibus blanditiis nihil aperiam placeat velit, eaque sit sapiente, labore vitae nisi. Vero laborum fugit saepe ullam illo maxime aliquid consequatur, officiis amet nostrum quia quae ratione ad praesentium soluta,
        sed eligendi, cupiditate quis explicabo distinctio maiores fugiat ipsum ab voluptate. Consectetur dolor repudiandae enim asperiores non, rerum, unde sapiente accusamus? Accusamus saepe praesentium ipsa, amet accusantium fugit, ut sit quisquam
        reprehenderit.
      </p>
    </div>
  </div>
</main>

1

.wrap {
  width: 800px;
}

.st {
  background: url(http://www.mountainguides.com/photos/everest-south/c2_2011b.jpg) no-repeat center center;
background-size: cover;
  -webkit-background-size: cover;
  
  min-width: 800px;
  width: 100%;
}
<main>
  <div class="st">
    <div class="wrap">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat et in culpa, esse animi sunt deleniti quibusdam quae debitis quidem ut voluptate autem, accusantium impedit perferendis aliquid expedita dolores blanditiis mollitia sapiente. Magni, cum in atque nulla inventore voluptatibus blanditiis nihil aperiam placeat velit, eaque sit sapiente, labore vitae nisi. Vero laborum fugit saepe ullam illo maxime aliquid consequatur, officiis amet nostrum quia quae ratione ad praesentium soluta, sed eligendi, cupiditate quis explicabo distinctio maiores fugiat ipsum ab voluptate. Consectetur dolor repudiandae enim asperiores non, rerum, unde sapiente accusamus? Accusamus saepe praesentium ipsa, amet accusantium fugit, ut sit quisquam reprehenderit.
      </p>
    </div>
  </div>
</main>

Ваш ответ

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

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