Как переместить фоновое изображение в левую сторону?

Question

У меня есть раздел, в который я хочу добавить фоновое изображение, расположенное слева

Вот jsfidlle того, что я сделал до сих пор:

ОБНОВЛЕННАЯ ССЫЛКА : http://jsfiddle.net/Mwanitete/4f6xuh8b/39/

Вот изображение того, что я хочу получить.

.marketing-main-page-content-FAQ {
    /* margin-top: 80px; */
    padding: 231px 0px;
    background-image: url('https://svgshare.com/i/8K7.svg');
    background-repeat: no-repeat;
    background-size: 3829px 3581px;
    /* background-position: right; */
    background-position: right;
}
.marketing-main-page-content-FAQ_pytanie {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.marketing-main-page-content-FAQ_pytanie-card {
    width: 536px;
    height: 132px;
    font-family: Roboto;
    margin-top: 20px;
    font-size: 25px;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 41px;
}
.marketing-main-page-content-FAQ_pytanie {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.marketing-main-page-content-FAQ_header p {
    width: 451px;
    height: 184px;
    font-size: 35px;
    font-family: Roboto;
    color: #707070;
}
.marketing-main-page-content-FAQ_header {
    margin-left: 40px;
}

.marketing-main-page-content-kontakty-formularz_quote{
    background-image: url('https://svgshare.com/i/8KX.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    position: relative;
    width: 937px;
    height: 713px;
    display: flex;
    justify-content: center;
    vertical-align: middle;
    margin-left: -432px;
    }
    
    .marketing-main-page-content-kontakty-formularz_quote P {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: Roboto;
    font-size: 70px;
    right: 80px;
    color: white;
}

 

<div class="marketing-main-page-content-FAQ">
            <div class="marketing-main-page-content-FAQ_header">
                <h5>Faq</h5>
                <p>Lorem ipsum dolor sit amet, vidit mundi gubergren ne usu, porro evertitur vix et.
.</p>
            </div>
            <div class="marketing-main-page-content-FAQ_pytanie">
                <div class="marketing-main-page-content-FAQ_pytanie-card card-0 card">

                    <a class="pytania" data-toggle="collapse" href="#test-block0" aria-expanded="true" aria-controls="test-block0">
                        Demo1
                    </a>
                    <div id="test-block0" class="collapse">
                        <div class="card-block">
                            Po kliknięciu w pytanie rozwija się dropdown z odpowiedzią na pytanie, jak klikniemy na
                            inne to się zwija. Najlepiej, żeby były to max. 2 zdania.
                        </div>
                    </div>
                </div>

                <div class="marketing-main-page-content-FAQ_pytanie-card card-0 card">
                    <a class="pytania" data-toggle="collapse" href="#test-block1" aria-expanded="true" aria-controls="test-block2">
                         Demo1
                    </a>
                    <div id="test-block1" class="collapse">
                        <div class="card-block">
                            Po kliknięciu w pytanie rozwija się dropdown z odpowiedzią na pytanie, jak klikniemy na
                            inne to się zwija. Najlepiej, żeby były to max. 2 zdania.
                        </div>
                    </div>
                </div>
                <div class="marketing-main-page-content-FAQ_pytanie-card card-0 card">
                    <a class="pytania" data-toggle="collapse" href="#test-block2" aria-expanded="true" aria-controls="test-block">
                       Demo1
                    </a>
                    <div id="test-block2" class="collapse">
                        <div class="card-block">
                            Po kliknięciu w pytanie rozwija się dropdown z odpowiedzią na pytanie, jak klikniemy na
                            inne to się zwija. Najlepiej, żeby były to max. 2 zdania.
                        </div>
                    </div>
                </div>
                <div class="marketing-main-page-content-FAQ_pytanie-card card-0 card">
                    <a class="pytania" data-toggle="collapse" href="#test-block3" aria-expanded="true" aria-controls="test-block">
                      Demo1
                    </a>
                    <div id="test-block3" class="collapse">
                        <div class="card-block">
                            Po kliknięciu w pytanie rozwija się dropdown z odpowiedzią na pytanie, jak klikniemy na
                            inne to się zwija. Najlepiej, żeby były to max. 2 zdania.
                        </div>
                    </div>
                </div>
                <div class="marketing-main-page-content-FAQ_pytanie-card card-0 card">
                    <a class="pytania" data-toggle="collapse" href="#test-block4" aria-expanded="true" aria-controls="test-block">
                        Demo1
                    </a>
                    <div id="test-block4" class="collapse">
                        <div class="card-block">
                            Po kliknięciu w pytanie rozwija się dropdown z odpowiedzią na pytanie, jak klikniemy na
                            inne to się zwija. Najlepiej, żeby były to max. 2 zdania.
                        </div>
                    </div>
                </div>
                <div class="marketing-main-page-content-FAQ_pytanie-card card-0 card">
                    <a class="pytania" data-toggle="collapse" href="#test-block5" aria-expanded="true" aria-controls="test-block">
                       Demo1
                    </a>
                    <div id="test-block5" class="collapse">
                        <div class="card-block">
                            Po kliknięciu w pytanie rozwija się dropdown z odpowiedzią na pytanie, jak klikniemy na
                            inne to się zwija. Najlepiej, żeby były to max. 2 zdania.
                        </div>
                    </div>
                </div>

            </div>
        </div>
        
        <div class="marketing-main-page-content-kontakty-formularz_quote">
                   

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

Что мне нужно сделать, чтобы получить то, что я хочу?

Answer 1

Может быть, это ближе к тому, что вы хотите. Я изменил размер фона на то, что отражает ширину окна.

.marketing-main-page-content-FAQ {
    padding: 231px 0px;
    background-image: url(https://svgshare.com/i/8K7.svg);
    background-repeat: no-repeat;
    background-size: 150vw;
    background-position: right 0;
}

Демо

Самый простой способ, который приходит мне в голову - не вырезать фон с помощью следующего div, - это добавить еще padding-bottom и вытянуть его обратно с -margin. Следующий фон, вероятно, не попадет в нужное место, но в адаптивном дизайне довольно сложно синхронизировать эти два. Не стесняйтесь играть с этими двумя значениями.

.marketing-main-page-content-FAQ {
    padding: 231px 0px 944px;
    background-image: url(https://svgshare.com/i/8K7.svg);
    background-repeat: no-repeat;
    background-size: 150vw;
    background-position: right 0;
    margin-bottom: -713px;
}

Демо