Фоновое изображение реагирует без обрезки

Question

Я уже сделал фоновое изображение в полном размере на своей странице, но когда я проверяю и пытаюсь отобразить его в режиме телефона, мое фоновое изображение обрезается, как я могу сопротивляться этой вещи, чтобы оно не могло быть обрезано но всегда охватывают определенную часть страницы

<div class="inner-banner has-base-color-overlay text-center" style="background: url(header.jpg); background-size: cover; position: center;">
    <div class="container">
        <div class="box">
            <h3>About Us</h3>
        </div>
    </div>
</div>

Answer 1

Вы можете установить эти css для BackGround Image:

background-position: 100% 100%;
background-size: cover;

и ваш ручной рост

Answer 2

Если вы используете фоновое изображение и хотите видеть его в мобильном режиме, то оно будет обрезано от фонового изображения, которое нужно вызвать img sr c.

Answer 3

    <style>
    .header-img {
    max-width:100%;
    margin:0 auto;
    display:block;
    }
    @media all and (max-width:600px){
    .header-img {
    height:300px;
    object-fit:cover;
    }
    </style>
    <div class="inner-banner has-base-color-overlay text-center">
        <div class="container">
            <div class="box">
                <img src="images/header.jpg" class="header-img" alt="">
                <h3>About Us</h3>
            </div>
</div>

Answer 4

замените свой стиль следующим кодом: -

background: url(header.jpg); background-size: 100%; position: center;