Настройка изображения в окне просмотра

Question

Я хочу установить фоновое изображение на 50vh и иметь эту кривую внизу. Однако, когда я делаю это, оно обрезает изображение снизу, и кривая теряется. Как сделать так, чтобы кривая сохранялась даже после установки 50vh?

.background{
    background-image: url("https://i.stack.imgur.com/r45nE.png");
    background-repeat: no-repeat;
    height: 50vh;
    /*height: 916px;*/ /*this is the height of the image*/
}

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <header>
        <div class="container-fluid d-flex justify-content-center background">

        </div>
    </header>

Answer 1

Вы можете добавить положение и размер фона следующим образом:

.background{
    background-image: url("https://i.stack.imgur.com/r45nE.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100%;
    height: 50vh;
    /*height: 916px;*/ /*this is the height of the image*/
}

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <header>
        <div class="container-fluid d-flex justify-content-center background">

        </div>
    </header>

Answer 2

Вы также должны использовать свойства background-size и background-position:

.background{
    background-image: url("https://i.stack.imgur.com/r45nE.png");
    background-repeat: no-repeat;
    background-size: cover;    
    background-position: 0% 100%;
    height: 50vh;
    /*height: 916px;*/ /*this is the height of the image*/
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <header>
        <div class="container-fluid d-flex justify-content-center background">

        </div>
    </header>

Answer 3

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

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke();

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

Answer 4

Поскольку вы используете как background, из-за которого изображение есть, а вы просматриваете только его верхнюю половину.Вам нужно переместить фон в порт просмотра.

background-position: bottom;
background-size: cover;

Positon покажет ваше изображение снизу, а background-size закроет ваше изображение в окне просмотра.