Не верно работает background-size:cover

Question

background-size: cover; - не масштабирует изображение под размер экрана по ширине, оно выезжает за края, попробовал уже все что можно было, но мне кажется что я что-то упустил и проблема элементарная.

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: url(/images/Layer_15.jpg) center no-repeat, url(/images/picture.png) center no-repeat;
  background-size: cover;
}

<div class="intro">
  <div class="container">
    <h1>MoGo</h1>
  </div>
</div>

Answer 1

Попробуйте добавить в CSS строчку:

body { margin: 0; padding:0; }

body { margin: 0; padding:0; }
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: url(/images/Layer_15.jpg) center no-repeat, url(/images/picture.png) center no-repeat;
  background-size: cover;
}

<div class="intro">
  <div class="container">
    <h1>MoGo</h1>
  </div>
</div>

Answer 2

Если вы хотите растягивать картинку вусмерть, чтобы картинка маштабировалась под размер экрана - пишите background-size: 100% 100%.
Но: background на этом интро не является тем, что пользователь обязательно должен увидеть, это просто элемент декорации, людям не важно видеть орла полностью.

Вот пример с растянутым вусмерть орлом: (Не надо так делать)

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: block;
  padding: 0 10px;
}

.intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  background: url(https://i.stack.imgur.com/3i13y.jpg) no-repeat center;
  background-size: 100% 100%;
}

<div class="intro">
  <div class="container">
    <h1>MoGo</h1>
  </div>
</div>

А вот background-size: cover, это лучше подходит для этого:

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: block;
  padding: 0 10px;
}

.intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  background: url(https://i.stack.imgur.com/3i13y.jpg) no-repeat center;
  background-size: cover;
}

<div class="intro">
  <div class="container">
    <h1>MoGo</h1>
  </div>
</div>

БЛОГ НА HUSL

Не верно работает background-size:cover

Ответы (2 шт):