html text on responsive background image - html

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('http://i.stack.imgur.com/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('http://i.stack.imgur.com/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.

Answer 2

you could try tweaking the jumbotron class in Bootstrap 3 just like i did for my website.
.jumbotron {
background: url('background-photo.jpg') no-repeat center center;
}
you could change the dimension of the jumbotron depending on the dimensions you want.
<div row jumbotron>
<div class="col-md-6 col-md-offset-6">text</div>
</div>