html text on responsive background image

Question

I want to achieve the following:

Where there is a background image, and a text over it (text position is bootstrap offset-6 col-6)

And for it to be responsive.

The thing is, that unlike conventional background, I do care how the background image is truncated, I need the phone to be visible regardless of the width.

I tried: background: url(background-photo.jpg) center center cover no-repeat fixed;

And the invisible img trick on How to get div height to auto-adjust to background size?

In all the cases the phone gets truncated

Assistance will be appreciated

Edit:
As requested - the original div structure is:

<div id="hungry">
    <div class="col-xs-offset-6 col-xl-offset-6 col-xs-6 col-xl-6">
        <p>Hungry doesn't always happen in the kitchen</p>
    </div>
</div>

But I have no problem changing it to whatever works...

Answer 1

Solution with JavaScript

I know this is not a CSS-only solution a I use JavaScript, but it could help as a temporary solution while we look for a CSS thing.

The HTML would be the same as you posted:

<div id="hungry">
    <div class="col-xs-offset-6 col-xl-offset-6 col-xs-6 col-xl-6">
        <p>Hungry doesn't always happen in the kitchen</p>
    </div>
</div>

The CSS for the div with id "hungry" would look like this:

#hungry {
    background:url('https://i.sstatic.net/7xasp.jpg') no-repeat center center ;
    background-size:cover;
    width:100%;
}

And finally, with JavaScript (I used jQuery to make it easier), you resize the height of #hungry depending on the screen width:

// you know the size for your image
imageWidth = 1919;
imageHeight = 761;
imageProportion = imageHeight/imageWidth;

function resizeJumbo() {
    $("#hungry").css({ height: $(window).width() * imageProportion });
}

$(window).on("resize", function() {
    resizeJumbo();
});

$(document).ready(function() {
    resizeJumbo();
});

You can see a demo working on this fiddle: http://jsfiddle.net/hyfz0Lga/.

Solution with CSS only

Just update the CSS for the hungry div a little:

#hungry {
    background:url('https://i.sstatic.net/7xasp.jpg') no-repeat center center ;
    background-size:cover;
    width:100%;
    padding-top:20%;
    padding-bottom:20%;
}

You can see it working here: http://jsfiddle.net/hyfz0Lga/1/.

Why padding-top:20% and padding-bottom:20%?

Those values have to do with the size of the picture, and the proportion between them. In your case: width = 1919 and height = 761, so the proportion between width and height is (761 / 1919) * 100 = 39.65%. Just add half that value on top, and half that value at the bottom, then the text will remain always in the middle, and the picture will always be proportional.

I know it's a bit "hacky" and plays with knowing some data, but it seems to be working fairly well.