Как стилизовать background снизу и как на макете?

У вас есть два фото:

1. Как у меня получается
2. Как должно быть на макете

Я стилизовал это через background-position:; и background-size:;, но у меня выходит не правильно,

Помогите мне пожалуйста. Вот мой код:

padding-bottom: 100px;
background-image: url('../../img/mobile/[email protected]');
background-position: bottom;
background-repeat: no-repeat;
background-size: contain;

@media (min-device-pixel-ratio: 2),
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi),
(min-resolution: 2dppx) {
    background-image: url('../../img/mobile/[email protected]');
}

@media screen and (min-width: 752px) {
    background-image: url('../../img/tablet/[email protected]');

    @media (min-device-pixel-ratio: 2),
    (-webkit-min-device-pixel-ratio: 2),
    (min-resolution: 192dpi),
    (min-resolution: 2dppx) {
        background-image: url('../../img/tablet/[email protected]');
    }
}

@media screen and (min-width: 1264px) {
    padding-top: 200px;
    padding-bottom: 200px;
    background-image: url('../../img/dekstop/[email protected]');

    @media (min-device-pixel-ratio: 2),
    (-webkit-min-device-pixel-ratio: 2),
    (min-resolution: 192dpi),
    (min-resolution: 2dppx) {
        background-image: url('../../img/dekstop/[email protected]');
    }
}