HTML-текст на адаптивном фоновом изображении ⇐ CSS

[Anonymous]

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:

Hungry doesn't always happen in the kitchen

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


Источник: https://stackoverflow.com/questions/278 ... ound-image