html text on responsive background image

Question

I want to achieve the following: enter image description here

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...

Are you looking for CSS-only or is JavaScript OK? Also, are you using `.jumbotron` (as in the proposed solution)? And, is the picture taking the whole width of the screen or only the container size? — Alvaro Montoro, Jan 11 '15 at 14:38
Whole width. I prefer CSS solution but a JS one will do (if it solves the problem) - currently I'm using a regular div all the width - can use jumbotron if it helps... — Boaz, Jan 11 '15 at 14:39
It's fine, I just wanted to figure out what was the HTML structure (is possible, post the necessary `div`s as part of the question) — Alvaro Montoro, Jan 11 '15 at 14:43

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

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.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('https://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.

cool... I'd love a CSS only solution. I think I tried this one and failed to succeed - but maybe it will direct you in the right direction http://stackoverflow.com/a/22211990/429249 — Boaz, Jan 11 '15 at 15:13
@Boaz I just updated the solution with a CSS-only option. It's a bit "cheecky", but it seems to work fine — Alvaro Montoro, Jan 11 '15 at 15:15
awesome - and if you can explain why it solves the problem (so I'll learn something) - I'll be grateful. Thanks! — Boaz, Jan 11 '15 at 15:20
I'll put it on the response as an edit, because it plays a bit with knowing the size of the picture — Alvaro Montoro, Jan 11 '15 at 15:21
Done. Probably you could find a more generic solution by using `calc()` — Alvaro Montoro, Jan 11 '15 at 15:30
impressive solution. Thanks! (You solved centering the text on the way as well!!!) — Boaz, Jan 11 '15 at 15:32

score 0 · Answer 2 · answered Jan 11 '15 at 13:47

0

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>

answered Jan 11 '15 at 13:47

Coding Enthusiast

3,865
1
27
50

didn't work... The height is tight on the text (I can add padding to it) but the phone still gets out of screen – Boaz Jan 11 '15 at 13:51
@Boaz did you try adding
text
? might be a solution for the text. and you can also add col-xs-12 for mobile. that might work. – Coding Enthusiast Jan 11 '15 at 14:08
If you still think your answer solves the issue - can you make a JSFiddle to "prove" it? (take the image I uploaded and slap a text on it) – Boaz Jan 11 '15 at 14:41

html text on responsive background image

2 Answers2

Solution with JavaScript

Solution with CSS only