Фоновое изображение обрезается при изменении размера

Question

Я настраиваю тему Bootstrap. Фоновое изображение, которое я добавил, обрезается при изменении размера.

HTML:

<!-- Masthead -->
  <header class="masthead">

CSS:

header.masthead {
  padding-top: 10rem;
  padding-bottom: calc(10rem - 72px);
  background: url("https://en.wikipedia.org/wiki/Flower#/media/File:Flower_poster_2.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;

}

Answer 1

Я не знаю подробностей вашей bootstrap темы, но в css, если вы хотите, чтобы фоновое изображение не было обрезано, вам нужно изменить значение размера фона с обложки на: background-size : содержать ;. Это предотвратит обрезание вашего изображения, но если ваше изображение недостаточно велико, чтобы покрыть содержимое, содержащееся в нем, у вас будет мертвое пространство.