How to float the background image to the left side?

Question

I have section which I want add a background image placed on the left side

Here is jsfidlle of what I have done so far:

UPDATED LINK : http://jsfiddle.net/Mwanitete/4f6xuh8b/39/

Here is the visual of what I want to have.

.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">
                   

I tried playing with background size but unfortunately I couldn't manage to make it work as expected,

What do I need to do to get what I want?

Answer 1

Maybe this is closer to what you want. I changed the background size to something that reflects window width.

.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;
}

Demo

Easiest way that comes to my mind about not cutting the background with the next div is adding more padding-bottom and pulling it back with -margin. The next background probably won't hit the exact spot you want, but in responsive design is kinda hard to synchronize those two. Feel free to play with those two values.

.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;
}

Demo