Question: I want to achieve the following:
![enter image description here](https://i.stack.imgur.com/7xasp.jpg)

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?](https://stackoverflow.com/questions/600743/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: 
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.
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>

```