How to get Summernote to overlay an Image

Question

I am creating an application in mvc and using Summernote Editor. I need my Summernote Editor to overly an image similar like what they have on the Summernote landing page -https://summernote.org/

<div class="note-editor">
   <img src="@Url.Content("~/css/Images/Home.jpg")"  alt="logo" style="width: 100%; top: 50px;"/>
    <div id="summernote" class="note-dropzone">
        <p><br></p>
    </div>

</div>

<script type="text/javascript">
    $(function () {
        // main summernote with custom placeholder
        var $placeholder = $('.placeholder');
        $('#summernote').summernote({
            height: 50,
            toolbar: [],
            codemirror: {
                mode: 'text/html',
                htmlMode: true,
                lineNumbers: true,
                theme: 'monokai'
            },
            callbacks: {
                onInit: function () {
                    $placeholder.show();
                },
                onFocus: function () {
                    $placeholder.hide();
                },
                onBlur: function () {
                    var $self = $(this);
                    setTimeout(function () {
                        if ($self.summernote('isEmpty') && !$self.summernote('codeview.isActivated')) {
                            $placeholder.show();
                        }
                    }, 100);
                }
            }
        });
    });
</script>
@section Scripts
{
    <script src="~/Scripts/summernote.min.js" type="text/javascript"></script>
    <link href="~/Content/summernote.min.css" rel="stylesheet" />
}
 

Any help will be appreciated.