responsive image full sreen width, with text on it with viewport width

I would like to have an image after the menu, which should have full screen width. The width of the website is not full screen width. On the image I want to show text, but the text should be only within the website with. The image must be responsive. I tried it with a background image,

<style>
   .WelcomeMsg {
    width: 100%;
    height: auto;
    background-image: url(/img/peniel_background.jpg);
    }
</style> 

<div class="WelcomeMsg">
        some welcome text
</div>

but the image is not responsive (it does replicate it self), and also the text is on the full width of the screen and not the width of the other content.

then I tried this style:

<style>
    .WelcomeMsg {
        background-image: url(/img/peniel_background.jpg);
        background-position: center center;
        background-size: 100%;
    }
</style>

it makes the width 100%, but the text on the images is also along the whole width of the screen, and not the reduced width of the other content.The other issue is, that on small screens, it replicates the background image, because the text height is more than the image...

I use .Net Core with bootstrap, so if the solution includes bootstrap, that is also ok.

Any help? thanks