Сделать фон во всю ширину за контейнером

Question

Сделать фон во всю ширину за контейнером

Рейтинг: 0Ответов: 1Опубликовано: 28.03.2023

При масштабировании страницы фон липнет к одному краю и уезжает. Это нормально? Нужно будет адаптировать под такой размер или можно растягивать картинку в нормальном положении?

.container {
    max-width: 1500px;
    margin: 0 auto;
}


.why-us-background {
    background: url("picture.png") no-repeat;
    width: 100%;
    height: 1050px;
    background-position: 0 150px;
}


.why-us-container {
    padding-top: 60px;
    background: #181819;
    border-radius: 40px;
    height: 600px;
}

<div class="why-us-background">
        <div class="container">
            <div class="why-us-container">
            </div>
        </div>
</div>

При использовании background-size:cover картинка срезается снизу. как уметить всю?

css html вёрстка

Источник: Stack Overflow на русском

Answer 1

▲ 0

При использовании background-size:cover картинка срезается снизу. как уметить всю?

Вот пример того что картинка показывается на весь контейнер...

Свои свойства я выделил комментарием. Добавил бордер для понимания границ контейнера.

.container {
  max-width: 1500px;
  margin: 0 auto;
}

.why-us-background {
  background: url("https://1001puzzle.ru/upload/iblock/cb8/cb8ee635c1c5daccd8b0a671b19d860a.jpg") no-repeat;
  width: 100%;
  height: 1050px;
  background-position: 0 150px;
  /* добавил */
  background-size: cover;
  background-attachment: fixed;
  border: 5px dotted red;
}

.why-us-container {
  padding-top: 60px;
  background: #181819;
  border-radius: 40px;
  height: 600px;
}

<div class="why-us-background">
  <div class="container">
    <div class="why-us-container">
    </div>
  </div>
</div>

Сделать фон во всю ширину за контейнером

Ответы