Bootstrap отзывчивый масштаб IMG, чтобы возглавить вместо центра

Question

У меня есть фоновая фотография в шаблоне Bootstrap с использованием HTML / CSS. Мне было интересно, можно ли сделать это на большом экране, вместо того, чтобы масштабировать изображение и увеличивать его по центру, он увеличивает масштаб?

Спасибо за вашу помощь!

РЕДАКТИРОВАТЬ: Это вживую в https://chorebug.com/ - взгляните на изображение заголовка. При изменении размера страницы он обрезается и изменяет размеры. Но на большом мониторе он выскакивает у него из головы, и я бы хотел, чтобы он обрезался сверху.

Answer 1

Вам просто нужно установить фоновое положение заголовка изображения. Для этого вы можете добавить атрибут background-position в правило класса header.masthead

header.masthead {
    background-position: center top;
}

OR

Вы можете изменить фоновое обозначение на:

header.masthead {
    background: url("../IMG_4126.jpg") no-repeat center top;
}

Answer 2

просто измените значение свойства

Landing-page.css: 21

измените это будет делать то, что вы хотите background : url("../IMG_4126.jpg") no-repeat top center

Answer 3

Добавить медиазапрос для полноэкранного размера со следующим правилом:

@media (min-width: 768px) {
     header.masthead {
          background-position: top;
     }
}