Html text on responsive background image

Question

I want to achieve the following:

If there is a background image and text above it (the text position is bootstrap-offset-6 col-6)

And in order to be responsive.

The fact is that, unlike the usual background, I do not 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 img invisible trick on How to get div height to automatically adjust background size?

In all cases, the phone is truncated

Help will be appreciated

Edit :
As requested, the original div structure:

 <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 anything that works ...

Answer 1

JavaScript solution

I know this is not a CSS-only solution. I use JavaScript, but this may help as a temporary solution when we look for a CSS article.

HTML will 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> 

CSS for a 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 simplify), you resize #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 the demo that is working on this script: http://jsfiddle.net/hyfz0Lga/ .

CSS only solution

Just update the CSS for the hungry div a bit:

 #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 how it works here: http://jsfiddle.net/hyfz0Lga/1/ .

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

These values ​​are related to the size of the image and the proportion between them. In your case: width = 1919 and height = 761, so the ratio between width and height (761/1919) * 100 = 39.65%. Just add half of this value above and half this value below, then the text will always remain in the middle, and the image will always be proportional.

I know this is a bit “hacked” and plays with some data understanding, but it seems to work quite well.

Answer 2

you can try to configure the jumbotron class in Bootstrap 3 in the same way as I did for my site.

 .jumbotron { background: url('background-photo.jpg') no-repeat center center; } 

You can resize the jumbotron depending on the sizes you want.

 <div row jumbotron> <div class="col-md-6 col-md-offset-6">text</div> </div>