How to crop image within SVG background border?

To summarize, this is my current website homepage, and this is how it should be.

I need to crop the image within the background border, but I can`t really figure out how. I saw this post but it didn't helped much.

The SVG is the following:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="1440px" height="733px" viewBox="0 0 1440 733" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
    <title>2</title>
    <desc>Created with Sketch.</desc>
    <g id="Marshmello_landing-page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Marshmello_landngpage-Copy-2" fill="#3DA3C4">
            <path d="M0,0 L1440,0 L1440,642.391576 C1314,702.797192 1187.66667,733 1061,733 C871,733 566.667261,561.026611 379,545 C253.888493,534.315592 127.555159,566.779451 0,642.391576 L0,0 Z" id="2"></path>
        </g>
    </g>
</svg>